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
Top comments (1)
Splendid!
I like it.