44 CSS Glassmorphism Examples You Can Actually Use

That frosted glass effect you keep seeing on modern websites? It’s called glassmorphism.

Apple brought this translucent UI design trend mainstream with macOS Big Sur, and it spread fast across dashboards, landing pages, and mobile apps.

The technique uses backdrop-filter blur, transparency, and layered backgrounds to create depth without heavy graphics.

Looks impressive. Actually pretty simple to build.

This collection of CSS glassmorphism examples covers everything from basic glass cards to login forms, navigation bars, and buttons.

You’ll get working code snippets, design principles, browser support details, and fixes for common mistakes.

What is CSS Glassmorphism

CSS glassmorphism is a design style that creates frosted glass effects on web elements.

The technique uses transparency, blur, and layered backgrounds to achieve depth and visual interest.

Apple popularized this aesthetic with macOS Big Sur in 2020, and it quickly spread across user interface design.

Unlike flat design, glassmorphism adds dimension through semi-transparent panels that reveal blurred content beneath them.

The effect works best over colorful gradient backgrounds or vibrant images where the blur creates visual texture.

Microsoft’s Fluent Design System and Windows 11 also adopted similar translucent interface elements.

CSS Glassmorphism Examples To Check Out

CSS Glassmorphism Generator

Create stunning glass-like UI elements with ease. This intuitive CSS Glassmorphism Generator helps designers and developers craft modern, frosted-glass effects for their web projects.

Key Features:

• Live Preview: See your changes instantly with multiple example components
• Fine-tuned Controls: Adjust blur, transparency, outline, and saturation
• Quick Presets: Choose from carefully crafted presets:
  • Subtle: Light, elegant glass effect
  • Bold: High-impact, prominent blur
  • Frosted: Maximum blur with minimal transparency

Colour Glassmorphism

See the Pen
Glassmorphism by Kunal Umap (@kunal-umap)
on CodePen.

Product Glassmorph

See the Pen
[WIP] Product Glassmorph by Alex (@alexkleinubing)
on CodePen.

Glassmorphism by Mina

See the Pen
Glassmorphism by Mina (@codeanddream)
on CodePen.

Feedback Modal Design

See the Pen
Feedback Modal Design by Rizky Firman Syah (@RizkyFirman)
on CodePen.

Weather (Glassmorphism UI)

See the Pen
Weather(Glassmorphism UI) by Su Thae Thae Po (@suthaethaepo)
on CodePen.

GlassMorphism + Parallax

See the Pen
GlassMorphism + Parallax by Olga (@olevchenko133)
on CodePen.

Frosted Glass Effect – Form

See the Pen
[WIP] Product Glassmorph by Alex (@alexkleinubing)
on CodePen.

Liquid Transition Effect

See the Pen
Liquid Transition Effect by Aysenur Turk (@TurkAysenur)
on CodePen.

Glassmorphism Animated

See the Pen
Glassmorphism Animated by jSpilka95 (@jspilka95)
on CodePen.

Blob Animation And Glassmorphism with CSS

See the Pen
Blob Animation And Glassmorphism with CSS by TheDevEnv (@thedevenv)
on CodePen.

Pure CSS Glassmorphism Profile Card

See the Pen
Pure CSS Glassmorphism Profile Card by CodingDecoding (@CodingDecoding)
on CodePen.

CSS Glass Reflection Effect

See the Pen
CSS Glass Reflection Effect by Dovydas (@dovydas)
on CodePen.

Responsive Glassmorphism Section with Card Hover Effects

See the Pen
Responsive Glassmorphism Section | Card Hover Effects by Alex (@AlexZab)
on CodePen.

CSS Glassmorphism Card Hover Effects

See the Pen
CSS Glassmorphism Card Hover Effects by Luisoms (@luisoms)
on CodePen.

NFT Card Component

See the Pen
NFT Card Component by kiberbash (@kiberbash)
on CodePen.

Glassmorphism Profile Design

See the Pen
Glassmorphism profile design by Widyatmoko (@widyatmoko)
on CodePen.

CSS – Frosted Glass

See the Pen
CSS – Frosted Glass by Kyle Wetton (@kylewetton)
on CodePen.

Pure CSS Music Player UI Design (Glassmorphism)

See the Pen
Pure CSS Music Player UI Design (Glassmorphism) by CodingDecoding (@CodingDecoding)
on CodePen.

Claymorphism + Glassmorphism

See the Pen
Claymorphism + Glassmorphism by MOZZARELLA (@TheMOZZARELLA)
on CodePen.

Glassmorphism Post Grid

See the Pen
Glassmorphism Post grid by Vinothkanna (@vinocrazy)
on CodePen.

Glass Morphism Icon

See the Pen
Glass Morphism icon by Swarup Kumar Kuila (@uiswarup)
on CodePen.

Glassmorph JS Calculator

See the Pen
Glassmorph JS Calculator by Jack Ellis (@opeala)
on CodePen.

Glassmorphism Creative Cloud App Redesign by Aysenur Turk

See the Pen
Glassmorphism Creative Cloud App Redesign by Aysenur Turk (@TurkAysenur)
on CodePen.

Glassmorphism: Simple Card UI

See the Pen
Glassmorphism: Simple Card UI by Rahul (@_rahul)
on CodePen.

Microsoft Fluent Material

See the Pen
Microsoft Fluent Material by Simone Bernabè (@simoberny)
on CodePen.

Glassmorphism CSS Panels and Buttons

See the Pen
Glassmorphism by Vihanga nivarthana (@vihanga)
on CodePen.

Glassmorphic Card by Glen Honeybone

See the Pen
Glassmorphic Card by Glen Honeybone (@urgedesign)
on CodePen.

Glassmorphism Icon Buttons

See the Pen
Glassmorphism Icon Buttons by Taylon, Chan (@tin-fung-hk)
on CodePen.

Gredient Mirror Effect

See the Pen
Glassmorphism by Albert (@walickialbert)
on CodePen.

Glassmorphism vs Neumorphism Cards | CSS, Js & VanillaTilt

See the Pen
Glassmorphism vs Neumorphism Cards | CSS, Js & VanillaTilt by Quentin Feret (@quentin-feret)
on CodePen.

iPhone 12 vs Galaxy S21

See the Pen
iPhone 12 vs Galaxy S21 #glassmorphism by Kalimah Apps (@khr2003)
on CodePen.

Apple Pay Glassmorphism Dark and Light Mode

See the Pen
Apple pay Glassmorphism Dark and light mode by Cristiano Luis (@Cristiano123)
on CodePen.

Glassmorphic Sign In Form

Yo, Shounak designed this sleek sign-in form. Wanna tweak it a bit? Go ahead, make it your own.

Glassmorphism Planet

See the Pen
Glassmorphism Planet by Tapio (@Taluska)
on CodePen.

CSS BEER! By Mike Golus

See the Pen
CSS BEER! by Mike Golus (@mikegolus)
on CodePen.

Glassmorphism Loader

See the Pen
Glassmorphism loader by shawn (@melzshawn1998)
on CodePen.

CSS Glassmorphism Opacity Levels Chart

See the Pen
Glassmorphism by Sambat (@sambatlim)
on CodePen.

Glassmorphism Credit Card

See the Pen
Glassmorphism Credit Card by ron (@ronkeee)
on CodePen.

Generative macOS Big Sur Waves

See the Pen
Generative macOS Big Sur Waves 🌊 [SVG] by George Francis (@georgedoescode)
on CodePen.

Jelly Card Glassmorphism

See the Pen
Jelly Card Glassmorphism – Bootstrap 5 by JellyPir.@t Coding (@psyloute)
on CodePen.

Simple Pagination Design

See the Pen
Simple Pagination Design Using Glassmorphism Effect by FullyworldWebTutorials (@Fullyworld_Web_Tutorials)
on CodePen.

Social Icon Glassmorph

See the Pen
Social Icon Glassmorph by Alex (@alexkleinubing)
on CodePen.

Glassmorphism Side Navbar With HTML & CSS

See the Pen
Glassmorphism Side Navbar With HTML & CSS by Nikhil27bYt (@NikhilBobade)
on CodePen.

Tab-Bar Glassmorphism Effect

See the Pen
Tab-bar (Glassmorphism Effect) by Saba Alikhani (@fydsa)
on CodePen.

How Does the CSS Glassmorphism Effect Work

The glass effect relies on a combination of CSS properties working together.

The backdrop-filter property applies blur to everything behind an element, creating that frosted appearance.

You need rgba color values with reduced opacity for the background, typically between 0.1 and 0.3 alpha.

Soft shadows and subtle borders complete the illusion of floating glass panels.

Which CSS Properties Create the Frosted Glass Look

Four core properties make glassmorphism work: backdrop-filter, background, border, and box-shadow.

Here’s what each contributes:

• backdrop-filter: blur(10px) — applies the signature frosted effect
• background: rgba(255, 255, 255, 0.15) — creates transparent overlay
• border: 1px solid rgba(255, 255, 255, 0.2) — adds subtle edge definition
• box-shadow — provides depth and separation from background

You can generate these values quickly using a CSS glassmorphism generator.

What Role Does backdrop-filter Play in Glassmorphism

The backdrop-filter property is the foundation of the entire effect.

It applies graphical effects to the area behind an element rather than to the element itself.

The blur() function within backdrop-filter creates the frosted glass appearance, with values typically ranging from 5px to 20px.

Higher blur values create a more diffused, opaque look while lower values maintain more background visibility.

You can combine multiple filter functions like backdrop-filter: blur(10px) saturate(180%) for richer results.

CSS Glassmorphism Code Examples

Real code beats theory every time.

These examples show practical implementations you can copy and adapt for your projects.

Each one uses the core glassmorphism principles with slight variations for different use cases.

How to Create a Basic Glassmorphism Card

The glass card is the most common implementation of this design style.

Start with this foundational code:

“ .glass-card { background: rgba(255, 255, 255, 0.1); 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); padding: 20px; } `

The -webkit-backdrop-filter prefix handles Safari compatibility.

Place this card over a gradient or colorful hero image for the effect to show properly.

For more CSS cards inspiration, check collections of card component designs.

How to Build a Glassmorphism Login Form

Login forms with glass effects look sleek and modern.

The translucent panel draws attention while maintaining visual connection to the background.

` .glass-login { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); padding: 40px; width: 100%; max-width: 400px; }

.glass-login input { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 12px 16px; color: #fff; width: 100%; } `

The input fields inherit the glass aesthetic with their own subtle transparency.

Browse CSS login forms for more authentication page designs.

How to Design a Glassmorphism Navigation Bar

Glass navigation bars create a floating header effect that stays readable over any content.

Use sticky navigation positioning combined with the blur effect.

` .glass-nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(17, 25, 40, 0.75); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.125); padding: 16px 24px; z-index: 1000; } `

The saturate function boosts colors seen through the glass, preventing washed-out appearance.

This technique pairs well with CSS header designs that need to overlay page content.

How to Make a Glassmorphism Button

Glass buttons add subtle elegance to call-to-action elements.

` .glass-button { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 12px 28px; color: #fff; cursor: pointer; transition: all 0.3s ease; }

.glass-button:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } `

The hover state increases opacity and adds lift through transform.

Explore more cool CSS buttons and CSS button hover effects for additional styles.

How to Create a Glassmorphism Profile Card

Profile cards showcase user information with a polished glass finish.

` .glass-profile { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); padding: 32px; text-align: center; }

.glass-profile img { width: 100px; height: 100px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); margin-bottom: 16px; } `

The circular avatar with a frosted border reinforces the glass theme.

Check out CSS card hover effects to add micro-interactions to these cards.

Glassmorphism Design Principles

The frosted glass effect only works when you follow specific design rules.

Background choice, blur intensity, and transparency levels all affect the final result.

Get these wrong and your glass panels look muddy or invisible.

What Background Works Best Behind Glassmorphism

Vibrant gradients and colorful images produce the strongest glass effect.

Use a CSS Gradient Generator to create backgrounds with purple-to-pink or blue-to-teal color transitions.

Solid colors and monochromatic backgrounds make the blur nearly invisible, defeating the purpose.

How Much Blur is Optimal for the Glass Effect

Blur radius between 8px and 16px works best for most UI components.

Below 5px looks barely frosted; above 25px becomes completely opaque and loses the translucent quality.

Test your blur values against different viewport sizes since the effect renders differently on mobile screens.

Browser Support for CSS Glassmorphism

The backdrop-filter property has solid support in 2024, but gaps remain.

Always check Can I Use before deploying glass effects to production sites.

Which Browsers Support backdrop-filter

Current support status:

• Chrome 76+ — full support since 2019
• Safari 9+ — requires -webkit- prefix
• Firefox 103+ — full support since July 2022
• Edge 79+ — full support (Chromium-based)
• Opera 63+ — full support

WebKit-based browsers need the -webkit-backdrop-filter prefix for Safari and older iOS versions.

How to Create Fallbacks for Unsupported Browsers

Use @supports queries to detect backdrop-filter availability and provide solid background alternatives.

` .glass-panel { background: rgba(30, 30, 30, 0.9); / Fallback / }

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

This approach ensures cross-browser compatibility without breaking layouts.

Common CSS Glassmorphism Mistakes

Most glassmorphism failures come from ignoring basic principles.

These issues are fixable once you know what causes them.

Why Does Glassmorphism Look Different on Mobile

Mobile browsers handle backdrop-filter with varying performance, and some disable it entirely in low-power mode.

Test on actual devices, not just browser DevTools, since emulators don’t accurately render blur effects.

Consider using media queries to reduce blur intensity on smaller screens for better performance.

How to Fix Performance Issues with Blur Effects

Backdrop-filter triggers GPU compositing, which drains battery and causes jank on lower-end devices.

Limit glass effects to key UI elements rather than applying them across entire page sections.

Reduce blur radius values and avoid stacking multiple blurred elements on top of each other.

If performance tanks, switch to a static CSS blur effect on a pseudo-element as an alternative.

Glassmorphism vs Neumorphism vs Flat Design

Three major UI design trends compete for attention in modern web projects.

Each has distinct characteristics and appropriate use cases.

| Style | Key Feature | Best For | Accessibility | | — | — | — | — | | Glassmorphism | Frosted transparency | Landing pages, dashboards | Moderate | | CSS Neumorphism | Soft shadows, extruded shapes | Minimal interfaces | Poor | | Flat Design | No shadows, solid colors | Content-heavy sites | Excellent |

Glassmorphism offers middle ground between flat simplicity and skeuomorphic depth.

Neumorphism struggles with color contrast requirements under WCAG guidelines.

Flat design remains the safest choice for web accessibility compliance.

Many designers mix these styles, using glass panels for featured content and flat elements for standard UI components.

The choice depends on your brand aesthetic and target audience’s devices.

Check visual hierarchy principles to combine styles effectively without creating visual chaos.

FAQ on CSS Glassmorphism Examples

What is glassmorphism in CSS?

Glassmorphism is a UI design style creating frosted glass effects using CSS properties like backdrop-filter, rgba backgrounds, and subtle borders.

The technique adds depth through transparency and blur, popularized by Apple’s macOS Big Sur and Microsoft’s Fluent Design System.

How do I create a glass effect in CSS?

Apply backdrop-filter: blur(10px) with a semi-transparent background using rgba values.

Add a subtle border with rgba(255, 255, 255, 0.2) and soft CSS shadow effects for depth. Place over colorful backgrounds for visibility.

Does backdrop-filter work in all browsers?

Chrome, Safari, Firefox 103+, and Edge support backdrop-filter fully.

Safari requires the -webkit-backdrop-filter prefix. Use @supports queries to provide solid background fallbacks for older browsers.

Why is my glassmorphism effect not showing?

The blur effect needs contrast to be visible. Plain white or solid color backgrounds won’t show the frosted glass look.

Use vibrant gradients or images behind your glass elements.

What blur value works best for glassmorphism?

Blur values between 8px and 16px produce optimal results for most components.

Lower values appear barely frosted while higher values above 25px become too opaque and lose the translucent glass quality.

Is glassmorphism bad for website performance?

Backdrop-filter triggers GPU compositing which can affect performance on lower-end devices.

Limit glass effects to key UI elements, avoid stacking multiple blurred layers, and test on actual mobile devices.

How do I make glassmorphism accessible?

Maintain sufficient accessible typography contrast between text and the translucent background.

Test with WCAG contrast checkers. Consider providing high-contrast mode alternatives for users with visual impairments.

Can I use glassmorphism with dark mode?

Yes. Adjust rgba values to darker tones like rgba(17, 25, 40, 0.75) for dark mode glass panels.

Increase blur slightly and add saturate filters to maintain visual interest against dark backgrounds.

What is the difference between glassmorphism and neumorphism?

Glassmorphism uses transparency and blur for frosted effects. Neumorphism creates soft, extruded shapes using subtle shadows on matching backgrounds.

Glassmorphism offers better accessibility while neumorphism struggles with contrast requirements.

Which CSS properties are required for glassmorphism?

Four properties create the glass effect:

• backdrop-filter: blur()

• background: rgba()

• border with transparency

• box-shadow for depth

Use a CSS Box Shadow Generator to fine-tune shadow values.

Conclusion

These CSS glassmorphism examples give you a solid foundation for implementing frosted glass effects in your projects.

The technique combines backdrop-filter blur, rgba transparency, and soft shadows to create modern translucent panels.

Browser support is strong across Chrome, Firefox, Safari, and Edge. Just remember the webkit prefix for older Safari versions.

Performance matters. Limit glass effects to key interactive elements rather than applying them everywhere.

Test on actual devices since DevTools don’t accurately render blur performance.

Pair glassmorphism with responsive design principles and proper usability practices.

The effect works beautifully for CSS forms, card components, and navigation bars when placed over vibrant gradient backgrounds.

Start with the basic glass card code, then expand to more complex UI components as you get comfortable with the property values.