DEV Community

Cover image for AwesomeCSS #1 | Apply Image Filters Just Using CSS
Medam Mahesh
Medam Mahesh

Posted on

2 2

AwesomeCSS #1 | Apply Image Filters Just Using CSS

This was something awesome that I had stumbled upon last week.

I am not much of a social butterfly but I do know that there is always a lot of buzz about filters going on in the social media. Coincidentally, the technique of this also revolves around a CSS property called filter.

Incase you are interested in watching video :

Interesting Finds

CSS filter property

The filter property defines visual effects (like blur and saturation) to an element (often ).
~ W3 Schools Link

CSS mix-blend-mode property

The mix-blend-mode property specifies how an element's content should blend with its direct parent background.
~ W3 Schools Link

Checkout the Codepen :

Thanks for reading till the end,

[Please have a look at my YouTube Channel. I post interesting web-related videos on it : https://www.youtube.com/channel/UCvf5cqRQk6aOmFZrgoU6K-Q]

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (1)

Collapse
 
memahesh profile image
Medam Mahesh

Hello Fellow Dev,

I am very much interested in hearing your thoughts and adventures with CSS. Take a minute to share them with me.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay