How to Create Glassmorphism Effect in CSS
Learn to create the trendy frosted glass UI effect using CSS backdrop-filter. Step-by-step tutorial with live interactive demo.
What is Glassmorphism?
Glassmorphism is a modern UI design style that creates a frosted glass effect. It's characterized by:
- Semi-transparent backgrounds - Usually white or light colors with low opacity
- Blur effect - The key ingredient using backdrop-filter: blur()
- Subtle borders - Light borders that enhance the glass edge
- Soft shadows - Adding depth without being too heavy
Made popular by Apple's iOS 7 and macOS Big Sur, glassmorphism is now used in modern web and app interfaces.
Glassmorphism
Frosted glass UI
Step-by-Step Tutorial
Follow these 5 simple steps to create the glassmorphism effect. Click any code block to copy.
Create the Background
Glassmorphism needs a colorful background to show through. Gradients work best - they make the blur effect really pop.
Add the Glass Element
Create a container element that will become your glass card. Set its dimensions and padding.
Apply backdrop-filter: blur()
This is the magic ingredient! The backdrop-filter property blurs everything behind the element. Include the -webkit- prefix for Safari.
Add Transparency with rgba()
Use rgba() for a semi-transparent background. The last value (0.15) is the opacity - lower values mean more transparency.
Add Subtle Border and Shadow
Finish with rounded corners, a subtle semi-transparent border, and a soft shadow for depth.
Live Interactive Demo
Adjust the sliders to customize your glassmorphism effect and copy the generated CSS.
Glassmorphism
Adjust the sliders
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.20);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}Complete Code Example
Here's the complete CSS for a standard glassmorphism effect you can copy and use:
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}Browser Support
backdrop-filter Browser Support
The backdrop-filter property is supported in all modern browsers:
Chrome
76+
Firefox
103+
Safari
9+ (prefix)
Edge
79+
Opera
63+
Always include -webkit-backdrop-filter for Safari compatibility. For older browsers, the effect gracefully degrades to just the semi-transparent background.
Glassmorphism Variations
Try different colors and blur amounts to create unique glass effects.
Light Glass
Light Glass
Dark Glass
Dark Glass
Heavy Blur
Heavy Blur
Colored Glass
Colored Glass
Frequently Asked Questions
Glassmorphism is a modern UI design trend that creates a frosted glass effect. It uses semi-transparent backgrounds, blur effects (via backdrop-filter), subtle borders, and shadows to make elements look like they're made of frosted glass. The effect became popular after Apple's iOS 7 and macOS Big Sur redesigns.
backdrop-filter has excellent browser support in 2024/2025, working in Chrome, Edge, Safari, Firefox, and Opera. However, you should always include the -webkit- prefix for Safari compatibility. For older browsers, the effect will gracefully degrade to just the semi-transparent background without the blur.
To create a darker glass effect, use rgba() with a dark color instead of white. For example, use 'background: rgba(0, 0, 0, 0.2)' for a dark tint. You can also reduce the blur amount and increase the background opacity for a more solid, darker appearance.
Glassmorphism works best over colorful, gradient, or image backgrounds. The blur effect needs something interesting behind it to be visible. Solid color backgrounds won't show the glass effect well. Gradients with multiple colors, abstract shapes, or photographs make the frosted glass effect really stand out.
In Tailwind CSS, you can create glassmorphism with: 'bg-white/20 backdrop-blur-lg rounded-2xl border border-white/30 shadow-lg'. The 'backdrop-blur-lg' class applies the blur, 'bg-white/20' creates a semi-transparent white background, and 'border-white/30' adds the subtle border.
More CSS Tutorials
Copy CSS from Website
Extract styles with 2 clicks
Center a Div (CSS)
Flexbox, Grid, and more
Center a Div (Tailwind)
Utility classes for centering
Convert CSS to Tailwind
CSS to utility classes
Neumorphism Button
Soft UI button design
Responsive Navbar
Mobile-friendly navigation
Sticky Header
Fixed navigation on scroll
CSS Pagination
Page navigation styles
CSS Accordion
Expandable content sections
Dropdown Menu
Hover and click dropdowns
CSS Modal
Popup dialog boxes
Toast Notifications
Animated alert messages
Hamburger Menu
Animated menu icon
Animate Gradients
Moving gradient backgrounds
Skeleton Loader
Loading placeholder UI
Element Screenshot
Capture any element as image
Pick Color from Website
Eyedropper tool comparison
Identify Fonts
Find fonts on any website
Download All Images
Bulk save images from any site
Measure Elements
Page ruler and measurements
Extract Colors from Website
Get any color palette instantly
Dark Mode Toggle
CSS variables and localStorage
Responsive Grid
CSS Grid auto-fit and minmax
Center Text in CSS
text-align, Flexbox, and Grid
Make Text Bold
font-weight values explained
Add Shadow in CSS
box-shadow, text-shadow, drop-shadow
Round Corners in CSS
border-radius and pill shapes
Style File Input
Custom upload buttons