CODEWITHSUNDEEP
cssphotoshop
Slick23
Slick23

Reputation: 5907

Is there a way to mimic photoshop's overlay filter with CSS?

The overlay blend alters the color of the image on top, as opposed to just altering the transparency. Is there a way to mimic this with CSS? Just exporting a photoshop image with the layer set to overlay and placing it over a background on the web page doesn't work.

Upvotes: 5

Views: 3795

Answers (3)

hughes
hughes

Reputation: 5713

It can't be done with pure css, but it can be done with javascript. Check out Pixastic's blend function, it has ~20 blending methods that match those in photoshop.

Note: this answer has become less accurate over the years. The mix-blend-mode attribute now works across most browsers, and pixastic seems to have disappeared.

Upvotes: 8

BigName
BigName

Reputation: 1097

I'm late to the party, but there is now a mix-blend-mode css property that applies blend mode to an entire element which takes into account the elements below.

Upvotes: 1

ruggero
ruggero

Reputation: 35

now you can do it with CSS but only in modern browser, try background-blend-mode: multiply; it blend the background-image of an element with its background-color.

Upvotes: 0

Related Questions