DEV Community

Cover image for CSS3: Blending and flexing

Posted on • Updated on


CSS3: Blending and flexing

In applications like photoshop, you are spoilt for choice when it comes to giving your graphics that X factor. Over the years many of these effects have been implemented in CSS3. one such effect is the mixed-blend-mode CSS property. This property can take the following values: screen, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. These effects are mainly categorized into the lightening or darkening effect categories. To see how CSS interprets these effects I put together this tutorial, which looks at the screen blend mode.

Alt Text

In screen blend mode you have a top layer of solid colors (this can be considered as a mask ) and a bottom layer that contains a color image. In the example above, the top layer is black, white, and shades of gray. After you apply the effect, the left side of the image is clear, this is because black areas become totally transparent. But as you gradually look towards the right of the image, the gray areas have half transparency, while the white area is opaque. Knowing how this works you can use black text on a white background and use as a mask over an image.

In the tutorial, I put together a little demo page with a vibrant background image which is overlayed with a flex grid with eight boxes., Then I applied the screen blend modes to select a group of boxes as shown below.

Alt Text

You can have a play around with different colors, gradients, transparency to get many effects. Hope you enjoy the video.

Oldest comments (0)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.