Making a frosted glass effect with CSS

For the past months I’ve been seeing a lot of frosted glass effects all over Twitter. There is something to this effect that makes it really satisfying to look at.

When I came across this tweet by Jeffrey last week I decided it was finally time to demystify this effect and show you how it is done.

Starting with gradients

The frosted glass effect really pops when there is something colorful in the background. That could for example be a colorful logo, or a simply a gradient like Jeffrey did in his example.

This gradient can be any gradient you like it to be. In this example we’re combining a linear gradient with a custom mix-blend-mode to create the gradient we want.

1
.rectangle {
2
  background-image: linear-gradient(to bottom, #B59CF8, #F5F2FF 48%, #B59CF8 68%, #8273A9 100%);
3
  mix-blend-mode: hard-light
4
}

This mix blend mode especially makes the gradient pop on darker backgrounds.

Adding the glass – another gradient

Once we have a colorful background we can add the glass effect on top. This is done by adding another gradient on top of the background. This time though, it will be a repeating gradient.

1
 .glass {
2
    background-image: repeating-linear-gradient(to right, rgba(255,255,255,.04) 0%, rgba(0,0,0,.39) 49%, rgba(255,255,255,.27) 100%);
3
 }

By default a repeating gradient is not different from a regular gradient. Meaning in the example above, you just see a single gradient spanning the full width of the rectangle.

Where a repeating gradient starts to differ, is when you change the background size. Giving it for example a background-size of 40px will make the gradient repeat every 40 pixels.

1
 .glass {
2
    background-image: repeating-linear-gradient(to right, rgba(255,255,255,.04) 0%, rgba(0,0,0,.39) 49%, rgba(255,255,255,.27) 100%);
3
    background-size: 40px;
4
 }

We’re gonna make this glass gradient pop even more, by also adding a custom mix blend mode. This time we’re using the color-dodge mode. Color dodge is a really interesting blend mode that makes the gradient look like it’s glowing.

1
 .glass {
2
    background-image: repeating-linear-gradient(to right, rgba(255,255,255,.04) 0%, rgba(0,0,0,.39) 49%, rgba(255,255,255,.27) 100%);
3
    background-size: 40px;
4
    mix-blend-mode: color-dodge;
5
 }

Combining the two

Combining the two gradients is the next step towards the frosted glass effect, and really shows the power of the color dodge mix blend mode. If we overlay the two right now, we see the following effect.

Both rectangles have been rotated as well, to make the effect even more interesting.

Adding the blur

The final step is to add a backdrop blur to the glass layer. This will make the glass layer look more like frosted glass, and less like a gradient.

1
.glass {
2
  backdrop-filter: blur(10px);
3
}

Et voila!

And that’s it! We’ve created a beautiful frosted glass effect with CSS. This effect is really powerful and can be used in a lot of different ways. I’m excited to see what you’ll create with it!

Don’t forget to check the live playground and the video at the top of this article, going even more in depth on how this effect is created.