CSS Blend Modes -Change Image Color with CSS

You can avoid making several coloured copies of your resources and add the results directly in the window.

CSS blend modes are a wonderful way to not only unify the look of content across websites, but they also allow you to set various colour versions of an image by modifying only one attribute in CSS: the colour. Screen, overlay, lighten, and darken are among the 15 blend mode options.

.blend-mode {
  background-image: url(image.jpg);
  background-color: red;
  background-blend-mode: multiply;
}

Multiply is a good and practical one. but it has also normal, screen, overlay, darken, lighten, color-burn, color-dodge, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. And also normal which reset it.

.screen-blend {mix-blend-mode: screen;}
.overlay-blend {mix-blend-mode: overlay;}
.darken-blend {mix-blend-mode: darken;}
.exclusion-blend {mix-blend-mode: exclusion;}
.multiply-blend {mix-blend-mode: multiply;}
.hue-blend {mix-blend-mode: hue;}
.saturation-blend {mix-blend-mode: saturation;}

.lighten-blend {mix-blend-mode: lighten;}
.color-dodge-blend {mix-blend-mode: color-dodge;}
.color-burn-blend {mix-blend-mode: color-burn;}
.difference-blend {mix-blend-mode: difference;}

.color-blend {mix-blend-mode: color;}
.luminosity-blend {mix-blend-mode: luminosity;}
.normal-blend {mix-blend-mode: normal;}

Another interesting property is mix-blend-mode, which allows you to blend the element’s data with the content. This works really effective for overlapping lettering.

Browser Support

For canvas: Firefox 20+, Chrome 30+, Safari 6.1+, Opera 17+, iOS 7+, Android 4.4+. Worst bad news: No IE.

For HTML/CSS: Firefox 30+, Chrome 35+, Safari 6.1.


Author Images
Syed
From Islamabad

A software developer with a keen interest in writing about technology, finance, and entrepreneurship. I've written for businesses in a variety of fields, including new technology, healthcare, programming, consumer applications, corporate computing, UI/UX, outsourcing, and education.

Post a comment

Your email address will not be published. Required fields are marked *

    Press x to close