DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to Create a Glassmorphism Effect with Pure CSS
DrPrime01
DrPrime01

Posted on

How to Create a Glassmorphism Effect with Pure CSS

Glassmorphism is a new design trend that started in 2021 after many developers complained about the controversial style of another design trend, neomorphism. Today, many websites and UI implement the glassmorphism effect, including major tech giants like Apple and Microsoft.

As the name implies, glassmorphism is about creating an HTML semantic container that resembles translucent glass. While the developer may decide the other style properties of the container, glassmorphism itself is the glass-like effect morphed with other developer-selected CSS properties.

Although some web applications generate the glassmorphism effect, and all you have to do is copy and paste the code in your code editor, it is a big challenge for a developer to know how to create one with CSS without external assistance. In this article, you will learn how to create a glassmorphism card using pure CSS.

Adding the backdrop-filter Property

The CSS backdrop-filter property with a value blur adds glassmorphism’s glassy effect to the element.

    .glass {
      backdrop-filter: blur(10px);
    }
Enter fullscreen mode Exit fullscreen mode

Since the backdrop-filter property was recently introduced, not all browsers are fully compatible with it, and therefore requires the vendor prefix -webkit- to work.

Adding the Background-color Property

While the backdrop-filter property and blur value produce the glassy effect, the background-color property of the glass container defines the glassy effect’s clear visibility. The CSS rgba property is the preferred solution for specifying the background color of the glass container, with rgb having a value of 255 respectively and the alpha channel, β€œa”, a value that gives the glass container a bit of transparency.

.glass {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background-color: rgb(255, 255, 255, 0.3);
    }
Enter fullscreen mode Exit fullscreen mode

Adding your Preferred Dimensions

Other properties added to these styles, such as the .glass container dimensions, are defined and designed to the developer’s taste.

.glass {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      min-height: 250px;
      width: 450px;
      border-radius: 1rem;
      background: rgb(255, 255, 255, 0.3);
      padding: 1.5rem;
      color: #fff;
    }
Enter fullscreen mode Exit fullscreen mode

One crucial property to note is the background of the parent of the .glass container. The background, which may be an image or color gradient, goes a long way in revealing the beauty of glassmorphism. In my opinion, a gradient background is beautiful and better. You may choose yours.

And here is the result!

Glassmorphism Card

In this article, you learned what glassmorphism is and how to create one using pure CSS.

You can access the codepen of the result here and update the styles to your preference.

Top comments (4)

Collapse
 
naomipham_ profile image
Naomi Pham • Edited on

Look great! 🧑

I also sometimes like to add linear gradient to background and a subtle border:

background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
border: 2px solid rgba(255, 255, 255, 0.2);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
drprime01 profile image
DrPrime01 Author • Edited on

Thank you!

And those are some "developer-selected" styling there

Collapse
 
kishore1501 profile image
kishore1501

Why r v using the webkit backdrop filter. Can anyone explain it further.

Collapse
 
drprime01 profile image
DrPrime01 Author

-webkit-backdrop-filter- enables your browser to display the effect of backdrop-filter even if you use an old browser

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›