DEV Community

Cover image for How to achieve simple glassmorphism effect in your website
Satvik
Satvik

Posted on

How to achieve simple glassmorphism effect in your website

img

A simple example with cards



To make a very simple blurry glass like effect we can make use of some pretty simple css to add this styling .

Glassmorphism makes use of background blur with bright colors and some transparency and a very subtle border

4 lines of CSS is all it takes :

 backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    background-color: rgba(0, 0, 0, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.125);
Enter fullscreen mode Exit fullscreen mode

We blur the background and set the saturation to 200% to make the colors of the background pop

Here I have also put a border , as I would be using this style on a card to be displayed on my website

So I will use a subtle border to seperate it from the background
This is what it looks like in my website

website

satvik.ninja



You can change the look of this effect by changing the values of blur and saturation according to your taste

Top comments (0)