Create a Frosted Glass Effect with Pure CSS

In this guide, you will learn how to make a frosted glass background with a smooth blur effect using the backdrop-filter property. No JavaScript or complex libraries are required.

What Is the Frosted Glass Effect

The frosted glass effect simulates translucent glass with a blurred background. It lets you see what’s behind an element but diffuses the colors and shapes for a soft, frosty appearance.

This technique is part of the glassmorphism trend in UI design. You can find it in dashboards, modals, cards, and navigation bars in many modern web apps.

The Concept

To create this visual illusion, you use a semi-transparent background combined with a blur filter. The element itself does not blur its own content – instead, it blurs whatever is behind it. That’s why it’s called a backdrop filter.

The essential properties are:

• background-color with an alpha channel (for transparency)
• backdrop-filter: blur() to blur the background
• optional gradient or border to enhance the glass edge

The HTML Setup

You only need a background image and a simple box that will act as the frosted layer.

<div class="background">
  <div class="box">
    <h2>Frosted Glass Effect</h2>
  </div>
</div>

The .background div can contain any image, pattern, or gradient you want to blur behind the .box.

The CSS Magic

Now let’s apply the glass effect using just a few lines of CSS.

.background {
  background-image: url('https://picsum.photos/id/1080/800/600');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 2rem 3rem;
  text-align: center;
  color: #333;
  font-family: Arial, sans-serif;
}

The key property here is backdrop-filter: blur(10px). This tells the browser to blur whatever is visible behind the .box. The semi-transparent white background makes the blur more subtle and realistic.

Adding a light border and rounded corners completes the smooth, glassy appearance.

Enhancing the Effect

You can make the glass more dynamic by adding gradients, shadows, and subtle light effects.

Here are a few variations you can try:

1. Add a gradient tint:

background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.1));

2. Add a soft glow:

box-shadow: 0 8px 32px rgba(0,0,0,0.2);

3. Add a colored border:

border: 1px solid rgba(255, 255, 255, 0.4);

With just a few tweaks, you can create different moods – cold glass, warm glow, or even tinted glass for dark themes.

Browser Support

The backdrop-filter property is supported in all modern browsers including Chrome, Edge, Safari, and Firefox (from version 103+). However, Internet Explorer does not support it.

If you need a fallback, you can simply provide a semi-transparent background without blur. The design will still look good, just less fancy.

.box {
  background-color: rgba(255, 255, 255, 0.6);
}

For more details on compatibility and usage, see the official documentation on MDN Web Docs.

Practical Use Cases

This effect works great in many UI scenarios:

• Cards on top of colorful backgrounds
• Navigation bars with transparency
• Modals and dialogs that keep the background visible
• Hero sections where text stands out over a blurred photo

It’s also perfect for websites that want a modern, “futuristic” or “soft” look without heavy graphics.

Performance Considerations

While backdrop-filter is hardware-accelerated, applying it to large or full-screen elements can increase GPU usage. For best performance, use it on smaller UI components such as cards, panels, or headers.

You can also reduce the blur radius or opacity to make the effect lighter.

Wrap-up

The frosted glass effect is a simple yet powerful way to make your design feel modern and sophisticated.
Using only CSS, you can blur the background, add transparency, and create a realistic glass panel that fits perfectly in any interface.

It’s part of the growing trend of glassmorphism – clean, elegant, and visually rich.
Experiment with colors, gradients, and blur values to craft your own unique version of this beautiful effect.