Design

🪟

Glassmorphism Generator

Create glass-effect CSS styles with blur and transparency

Presets

Glass Properties

Transparency

Blur Intensity

Saturation

Border Opacity

Border Radius

Tint Color

Quick:

Box Shadow

X Offset

Y Offset

Blur

Spread

Opacity

Preview Background

Custom

Live Preview

Glass Card

Glassmorphism UI

A frosted glass effect created with backdrop-filter and transparency.

Button

Secondary

Browser support: backdrop-filter works in all current browsers. Safari needs the -webkit- prefix (included above). If a browser does not support it, the blur is skipped and only the translucent background shows, so keep enough contrast for text to stay readable. Add a fallback like @supports not (backdrop-filter: blur(1px)) with a more opaque background for older targets.

Values

Background

rgba(255, 255, 255, 0.15)

Backdrop Filter

blur(12px) saturate(180%)

Border

1px solid rgba(255, 255, 255, 0.20)

Shadow

0px 8px 32px 0px rgba(0, 0, 0, 0.10)

CSS

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 16px;
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.10);
}

Tailwind CSS

bg-[rgba(255,_255,_255,_0.15)] backdrop-blur-[12px] backdrop-saturate-[1.8] border border-[rgba(255,_255,_255,_0.20)] rounded-[16px] shadow-[0px_8px_32px_0px_rgba(0,0,0,0.10)]

Uses Tailwind's arbitrary value syntax (v3+). The backdrop-blur and backdrop-saturate utilities already emit the -webkit- prefix for you.

React / Inline Style

style={{ 
  background: 'rgba(255, 255, 255, 0.15)',
  backdropFilter: 'blur(12px) saturate(180%)',
  WebkitBackdropFilter: 'blur(12px) saturate(180%)',
  border: '1px solid rgba(255, 255, 255, 0.20)',
  borderRadius: '16px',
  boxShadow: '0px 8px 32px 0px rgba(0, 0, 0, 0.10)'
}}

Share to Community

Was this tool helpful?

What is Glassmorphism Generator?

Free online glassmorphism generator to generate the popular glassmorphism (frosted glass) CSS effect.

Control background transparency, blur intensity, border opacity, and shadow. Preview the effect against different background images and colors so you can judge the glass against a real gradient. Build a frosted glass card, a translucent navbar, or a glass modal, and copy CSS with backdrop-filter: blur() plus the -webkit- prefix Safari needs and a fallback for older browsers. Most designs read best with blur between 8px and 24px and background opacity around 0.1 to 0.3. No signup required.

How to Use Glassmorphism Generator

1Adjust the background transparency with the opacity slider
2Set the blur intensity for the frosted effect
3Configure border and shadow properties
4Copy the CSS code with backdrop-filter

Frequently Asked Questions

Glassmorphism is a UI design trend that creates a frosted glass effect using CSS backdrop-filter blur, semi-transparent backgrounds, subtle borders, and shadows. It creates a sense of depth and translucency.

backdrop-filter has ~95% global browser support. The generated code includes a fallback for older browsers that simply shows the semi-transparent background without the blur effect.

The combination of: background with rgba() transparency, backdrop-filter: blur(), a subtle border with rgba(), and an optional box-shadow. The blur amount and transparency level control the glass intensity.

Set background opacity around 0.1 to 0.2 and blur between 8px and 24px, add a 1px translucent border, and a soft box-shadow. Preview it over a colorful gradient so the glass actually reads, then copy the CSS onto your card or navbar element. Glass only looks like glass against a non-flat background.

Safari requires the -webkit-backdrop-filter prefix in addition to the standard backdrop-filter property. The generated CSS includes both, so paste the full rule rather than only the unprefixed line.

Share this tool

Related Tools

CSS

AI CSS Generator

Free online AI CSS generator - browse 25+ CSS effects or generate custom styles with AI

🎛️

Neumorphism Generator

Free online neumorphism generator - generate soft UI neumorphic CSS styles

🔘

CSS Button Generator

Free online CSS button generator - generate styled CSS buttons with hover effects

SHD

CSS Box Shadow Generator

Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview

◻️

Border Radius Generator

Free online border radius generator - generate CSS border-radius values with visual editor

GRD

CSS Gradient Generator

Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview

.glass { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 16px; box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.10); }

style={{ background: 'rgba(255, 255, 255, 0.15)', backdropFilter: 'blur(12px) saturate(180%)', WebkitBackdropFilter: 'blur(12px) saturate(180%)', border: '1px solid rgba(255, 255, 255, 0.20)', borderRadius: '16px', boxShadow: '0px 8px 32px 0px rgba(0, 0, 0, 0.10)' }}

What is Glassmorphism Generator?

Free online glassmorphism generator to generate the popular glassmorphism (frosted glass) CSS effect.

Frequently Asked Questions

backdrop-filter has ~95% global browser support. The generated code includes a fallback for older browsers that simply shows the semi-transparent background without the blur effect.

Safari requires the -webkit-backdrop-filter prefix in addition to the standard backdrop-filter property. The generated CSS includes both, so paste the full rule rather than only the unprefixed line.