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

#css #webdev #showdev #tutorial

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.