Image Editor using CSS Filter and Blend Mode property

CSS is more amazing than most consider it to be. It’s often treated as a dumping ground for your font and background colors. However, it offers ways to make the lives of developers much easier. To demonstrate this, I’ve created a simple app using CSS filter and blend mode properties.

Project Details

demo for css filter

CSS filters let you specify grayscale, saturation, contrast, invert and much more.

The syntax is as simple as

.image{

    filter: grayscale(80%);

}

Blend modes, as the name suggests, blends the background image(s) and background color using the property you specify (e.g. multiply or screen).  Read more on this MDN reference page

You can have a look at the project at here

Leave a Reply

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