https://www.kodingkitty.com/blog/blend-modes/

 LightDark

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!

[mix-blend-color-burn  ]

This Kitty ...

... knows how to blend!

[mix-blend-color-burn  ]

Conclusion

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

  * Turn design into code
  * Blog
  * hello@kodingkitty.com

 

(c) 2023 Koding Kitty
All Rights Reserved