Back to all snippets
Library/CSS/Glassmorphism Effect
cssintermediateeffectsmodernui

How to implement Glassmorphism Effect in Css

Create frosted glass effect with backdrop blur

Quick Answer

Glassmorphism uses `backdrop-filter: blur()` on a semi-transparent `rgba` background to create the frosted glass look popularised in macOS and iOS.

Code Snippet

1.glass {
2  background: rgba(255, 255, 255, 0.1);
3  backdrop-filter: blur(10px);
4  -webkit-backdrop-filter: blur(10px);
5  border: 1px solid rgba(255, 255, 255, 0.2);
6  border-radius: 12px;
7}

What is Glassmorphism Effect?

Glassmorphism is a design trend that uses semi-transparent backgrounds, blur, and a subtle border to simulate frosted glass. The backdrop-filter: blur() property blurs whatever is rendered behind the element, while the rgba background and border create the translucent glass appearance.

How It Works

  1. 1`backdrop-filter: blur(10px)` blurs the content rendered behind the element.
  2. 2`background: rgba(255,255,255,0.1)` adds a translucent white tint over the blur.
  3. 3A thin `border: 1px solid rgba(255,255,255,0.2)` adds the subtle edge highlight.
  4. 4The `-webkit-backdrop-filter` prefix is still needed for Safari.

Common Use Cases

  • Hero cards - Overlay information cards on image or gradient backgrounds
  • Navigation bars - Sticky navbar with frosted glass over page content
  • Modals - Dialogs that feel light and layered over the page
  • Dashboards - Widgets with depth on colorful gradient backgrounds

Key Benefits

  • Creates visual depth and modernity with minimal CSS
  • Supported in all major modern browsers
  • Highly customisable opacity, blur radius, and border color
  • Works on any background including images, gradients, and videos

Common Mistakes to Avoid

  • Not adding the `-webkit-backdrop-filter` prefix — Safari still requires it.
  • Using glassmorphism on a flat single-colour background — the blur has nothing to act on so the effect is invisible.
  • Setting opacity too high — this makes the background fully visible and removes the glass appearance.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more css examples

Frequently Asked Questions

Does backdrop-filter work in all browsers?

`backdrop-filter` is supported in Chrome 76+, Safari 9+ (with -webkit- prefix), Firefox 103+, and Edge 79+. Add both the prefixed and unprefixed versions for full coverage.

Related Snippets

css
beginner
Flexbox Centering
Center elements horizontally and vertically with flexbox
layoutflexboxcentering
css
beginner
Truncate Text
Truncate text with ellipsis for single and multiple lines
texttypographyutilities
css
beginner
Smooth Scrolling
Enable smooth scrolling behavior
scrollbehaviorux

About This Css Code Snippet

This free css code snippet for glassmorphism effect is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this intermediate-level example will help you implement glassmorphism effect quickly and correctly.

All snippets in the Snippetly library follow css best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses css.

Tags: effects, modern, ui  | Language: css  | Difficulty: intermediate  | Category: CSS

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets