DEV Community

Cover image for Have the frost glass effect on your website. See How?
Areeb ur Rub
Areeb ur Rub

Posted on

Have the frost glass effect on your website. See How?

Actually, doing this pretty easy there's a css property called backdrop-filter this property add a graphical effect to background and you can add many things to background one of them is a blur effect.

How to Apply

So, to apply a backdrop blur filter first you have to choose a perfect color for background you can even add a image it will make it blur, but to make the see-through glass part work we have to make the color transparent.
I use VS Code todo stuff so it gives a color picker option
The color I used is a translucent white #ffffff3f , I tried to find an online color picker and fund this RGB COLOR PICKER , you can use this to get a transparent color.

so after setting up background no use put backdrop-filter:blur(5px); add the blur radius as much you want and this will add a frost glass effect to your div.

here are some other filter-functions of backdrop-filter:

backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

Try these too.

Save this to use sometime, and heart plz.

Source: MDN Web Docs

Discussion (1)

Collapse
artymanprince profile image
Artymanprince • Edited on

Splendid!
I like it.