CSS image manipulation

Dennis Basyrov
Aug 12 · 3 min read

In the previous article I gave a brief description of history and principals of computational photography. During the exploration of basics of image manipulations I found that we can use powerful CSS modes to create simple and satisfying effects. You don’t need to use Photoshop, or know Python and even a JavaScript. Colorisation, texturisation and more classic-photography effects comes with a few CSS declarations.

Two not newly (2014) introduces blending modes (background-blend-mode and mix-blend-mode) have been promoted by Adobe Web Platform team. It means that they use the same principles and algorithms as old-fashioned Photoshop. With mix-blend-mode, we define the blending between the element and the element(s) that are behind it. With background-blend-mode, we define the blending between the element’s background image and its background color. You can use this modes with 16 different properties — this will give you all the instruments to manipulate layers. By the way, you don’t need to memorize math formulas to use blending modes, but it’s worth having a basic understanding of how blending works under the hood.

There are 16 blend modes available in CSS: normal (which is the default blend mode and means that no blending is applied), multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.

Different types of CSS Blend Modes

Blend modes can be really useful when you want to achieve special effects like this:

Easy ways to play with CSS

CSSgram is a CSS library by Una Kravets recreating Instagram filters. The filters are pseudo elements on the <figure>, sitting on to of the <img>, using different gradients, opacities, and mix-blend-modes.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade