How to Create a Glassmorphism Effect with Pure CSS
Tags: css, tutorial, glassmorphism, neomorphism
Published: 2022-09-29 09:49:13

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.
```css
    .glass {
      backdrop-filter: blur(10px);
    }
```
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. 
```css
.glass {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background-color: rgb(255, 255, 255, 0.3);
    }
```
### 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.
```css
.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;
    }
```
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](https://lh5.googleusercontent.com/f0jL1gHLYGbBFOGKaRDPqde1gCYyrrmoBqKN_FlHOhvlyZgWfvGYM805FiMbEtYoSZipQXzSIle-y0O1VLtcIc6cxXrz2oi0u_ffx_0Me8tTQPKbOWyg-ubgksgNaDTxRvTj4jjF1cO6t6sqYpvYBCkaOmEeHLrN5YsIPpog2ksQAWYJkGYHAWAvVA)

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

You can access the [codepen](https://codepen.io/drprime01/pen/PoeWYvK) of the result here and update the styles to your preference.