Mastering CSS Blend Modes

CSS mix blend modes provide an easy, yet powerful way to create visually interesting designs.

Too lazy to read? Go straight to the widgets!

Visual effects galore

The modes allow you to manipulate how elements interact with each other. Which can lead in unique effects. Or not, depending on how creative you are. 😉

Mix blend modes allows you to overlay images, text, and elements in general, applying various blending techniques such as multiply, screen, overlay, and more.

The real meaning of normal

What we found interesting - or confusing - is that "normal" blend mode actually means "no blending". But that's a minor thing and we can live with that.

Almost like Photoshop

CSS blend modes offer similar capabilities to photo editing software such as Photoshop for manipulating the appearance of elements. Just as in editing software, CSS allows you to control how colors and pixels from different elements blend together.

However, it's important to note that CSS blend modes are limited and do not offer the full range of editing options found in Photoshop and its competitors.

Tailwind Mix Blend Modes

Although this article uses the Tailwind framework for the examples and widgets below, everything said here applies to regular CSS. So, even if you are not using Tailwind, you can still benefit from CSS blending. Cute!

Let's start with basic blend modes. Needless to say, they offer many exciting effects.

Normal

mix-blend-normal

Multiply

mix-blend-multiply

Screen

mix-blend-screen

Overlay

mix-blend-overlay

Darken

mix-blend-darken

Lighten

mix-blend-lighten

Color-dodge

mix-blend-color-dodge

Color-burn

mix-blend-color-burn

Hard-light

mix-blend-hard-light

Soft-light

mix-blend-soft-light

Difference

mix-blend-difference

Exclusion

mix-blend-exclusion

Hue

mix-blend-hue

Saturation

mix-blend-saturation

Color

mix-blend-color

Luminosity

mix-blend-luminosity

Plus-lighter

mix-blend-plus-lighter

Blending a single color

Below is a list of the blend modes available in Tailwind. Click on different colors and see how they work!

Normal

mix-blend-normal

Multiply

mix-blend-multiply

Screen

mix-blend-screen

Overlay

mix-blend-overlay

Darken

mix-blend-darken

Lighten

mix-blend-lighten

Color-dodge

mix-blend-color-dodge

Color-burn

mix-blend-color-burn

Hard-light

mix-blend-hard-light

Soft-light

mix-blend-soft-light

Difference

mix-blend-difference

Exclusion

mix-blend-exclusion

Hue

mix-blend-hue

Saturation

mix-blend-saturation

Color

mix-blend-color

Luminosity

mix-blend-luminosity

Plus-lighter

mix-blend-plus-lighter

Blending multiple layers

Did you know that you can overlay multiple layers to create more interesting effects?

Give it a try. Get creative!

This Kitty ...

... knows how to blend!

Conclusion

Whether you're using Tailwind CSS or regular CSS, the possibilities are endless. Happy blending!