How to create a glassmorphism effect with CSS

To create a glass mimicry effect of CSS, you need to use backdrop-filter to achieve background blur, set a translucent background such as rgba(255,255,255,0.1), add subtle borders and shadows to enhance the sense of hierarchy, and ensure that there is enough visual content behind the elements; 1. Use backdrop-filter: blur(10px) to blur the background content; 2. Use rgba or hsla to define the transparent background to control the degree of transparency; 3. Add 1px solid rgba(255,255,255,0.3) borders and box-shadow to enhance the three-dimensional sense; 4. Ensure that the container has rich backgrounds such as pictures or textures to present a blur penetration effect; 5. Provide -webkit-backdrop-filter and alternate background colors when not supported, and ultimately achieve a glass effect that is both modern and readable, complete sentences.

Creating a glassmorphism effect with CSS involves combining transparency, blur, and subtle borders to mimic a frosted glass appearance. It's widely used in modern UI design for overlays, cards, and navigation bars. Here's how to achieve it effectively.

1. Use backdrop-filter for Background Blur

The key to glassmorphism is blurring the area behind the element, not the element itself. This is where backdrop-filter comes in.

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

This applies a blur to whatever is behind the element — like content showing through a translucent surface. Note: backdrop-filter doesn't work on all older browsers (especially older versions of Firefox and some mobile browsers), so consider fallbacks.

2. Set a Semi-Transparent Background

Use rgba() or hsla() colors to make the background slightly transparent so the blur effect is visible.

 .glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

You can adjust the alpha value (last number in rgba ) to control transparency:

• 0.1 → very transparent (light frosted look)
• 0.3 → more solid but still glassy

Using white with low opacity gives a clean, modern look. For dark themes, try:

 background: rgba(255, 255, 255, 0.05);

Or a dark tint:

 background: rgba(0, 0, 0, 0.2);

3. Add Subtle Border and Shadow for Depth

A thin, light border enhances the glass-like edge. Combine it with a soft box-shadow to lift the element from the background.

 .glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

• border : Adds a faith edge that reflects light
• box-shadow : Gives depth and separation
• border-radius : Softens corners, typical in glassmorphic design

4. Ensure Proper Context

Glassmorphism only works when there's something behind the element to blur. Make sure:

• The container has enough visual content (images, patterns, or layered elements)
• The glass element isn't on a flat solid background

Example structure:

 <div class="container">
  <div class="glass">Content</div>
</div>

 .container {
  background: url('background-image.jpg') no-repeat center center;
  padding: 40px;
}

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 20px;
  color: white;
}

Browser Support and Fallbacks

Since backdrop-filter isn't supported everywhere:

• Use -webkit-backdrop-filter for Safari
• Provide a fallback background color for unsupported browsers

 .glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@supports not (backdrop-filter: blur(10px)) {
  .glass {
    background: rgba(255, 255, 255, 0.5); /* More opaque fallback */
  }
}

This ensures readability even when blur isn't available.

That's it — a clean, modern glassmorphism effect using just CSS. The trick is balancing transparency, blur, and lighting to create a sense of depth without sacrificing readingability.

The above is the detailed content of How to create a glassmorphism effect with CSS. For more information, please follow other related articles on the PHP Chinese website!