DEV Community

Cover image for Blend Effects - using CSS
Areeb ur Rub
Areeb ur Rub

Posted on

Blend Effects - using CSS

So, the blend effect can be used in css using the mix-blend-mode property in css.

There are many values you can put in mix-blend-mode, try changing it and explore how it works;

Some are listed here

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
Enter fullscreen mode Exit fullscreen mode

source: MDN Web Docs

Top comments (0)