My Tool Studio
CSS

CSS Glassmorphism Generator

This glassmorphism generator builds a frosted glass panel in CSS: set blur, saturation, tint color and opacity, border width and opacity, corner radius, a drop shadow and an edge highlight, and watch the panel over a colorful background. Eight presets include light glass, dark glass, a navbar, a card and a liquid glass style with a thin inner light line. Preview the glass as a card, navbar, button or login form, over five built-in backgrounds, a solid color or your own image, which stays in your browser. The CSS includes the -webkit-backdrop-filter line for Safari and an optional @supports fallback, and you can also copy Tailwind classes or an SCSS mixin. Designers use the effect for navbars over hero images, login cards and floating panels.

Always freeNo sign upRuns in your browser

Presets

Glass card

Content stays readable on a busy background.

Your image stays in this browser tab. It is not uploaded.

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

/* Browsers without backdrop-filter get a more solid panel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.75);
  }
}
Blur16px
Tint opacity20%
Saturate180%
Border width1px
Border opacity20%
Radius16px
Drop shadow0%
Edge highlight0%

A thin inner light line, as on liquid glass

Dark text in preview
Add @supports fallback

How to use

01

Choose a preset and backdrop

Click a preset such as Dark glass, Navbar or Liquid glass. Pick a preview background, a solid color or Your image, and switch the sample between card, navbar, button and login form.

02

Adjust the glass

Set the Tint color, Blur, Tint opacity, Saturate, Border width and opacity, Radius, Drop shadow and Edge highlight. The panel updates as you move each slider.

03

Copy the code

Copy the CSS with the -webkit- line and the optional @supports fallback, the Tailwind classes or the SCSS mixin. Copy share link saves the settings in a URL.

Why CSS Glassmorphism Generator

Fallback CSS for browsers without backdrop-filter

When backdrop-filter is not supported, the panel keeps its semi-transparent background but loses the blur. Text on top can then become hard to read. A feature query lets you give those browsers a more solid background instead.

Wrap the fallback in @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and inside it set a higher opacity for the same class, for example .glass { background: rgba(255, 255, 255, 0.85); }. Browsers that support the blur skip the block, and the rest get a panel that stays readable. The tool adds this block for you when the @supports fallback switch is on.

A few more practical points:

  • backdrop-filter only blurs content behind the element, so the panel must be see-through: keep background opacity well below 100 percent.
  • A parent with overflow: hidden and border-radius can clip the blur at the edges, which is usually what you want for cards.
  • Large blurred areas, such as a full-width sticky navbar, cost more to draw while scrolling on low-end phones. Test on a real device.

Common questions

Why does my glassmorphism panel look plain white on my site?
backdrop-filter can only blur what is behind the panel. On a plain white page there is nothing to blur, so the glass looks like a flat box. Place it over a photo, a gradient or colorful shapes, like the preview does, or test it on your own image.
How much blur should a glassmorphism effect use?
Around 8 to 20px suits most panels. Lower values keep shapes behind the glass recognizable, and higher values turn them into soft color. The default here is 16px, and the Frosted preset uses 28px.
How do I make dark glassmorphism?
Click the Dark glass preset or pick a dark tint, then keep Tint opacity between about 20 and 50 percent. Dark glass works on dark and photo backgrounds and keeps white text readable.
Does glassmorphism work in every browser?
backdrop-filter works in current Chrome, Edge, Firefox and Safari. Older Safari versions only support the -webkit- prefixed property, which is why the output includes both lines. The @supports fallback gives other browsers a more solid, readable panel.
How do I make the Apple liquid glass look in CSS?
Start from the Liquid glass preset. It uses a light blur, a very low tint opacity, high saturation, a brighter border and an Edge highlight, which adds two inset box shadows that act like light catching the rim. It is an approximation; the real effect also bends light, which CSS cannot do.
Is text readable on a frosted glass panel?
Only if you check it. Busy backgrounds can make text hard to read even through blur. Raise the tint opacity or blur, use bold text, and test on your own image with the Dark text switch to see which text color holds up.
What does the Saturate slider add to the glass effect?
It boosts the colors that show through the glass. Values above 100 percent make the blurred background look richer, which is part of the frosted look. At 100 percent the colors stay as they are.
Why do glass panels need that one-pixel border?
A thin, semi-transparent white border catches light at the edge and separates the panel from the background. Without it, the glass can blend into the page. Border width and Border opacity control how strong the edge is.
Can I use this glassmorphism CSS in Tailwind?
Yes. The Tailwind tab writes classes such as bg-[rgba(255,255,255,0.2)], backdrop-blur-[16px], backdrop-saturate-[1.8], border, border-white/20 and rounded-[16px]. If your build does not run Autoprefixer, also add the -webkit-backdrop-filter line from the CSS tab.

More CSS tools

View all

CSS Clip Path Generator

Visual clip-path editor with SVG import and PNG tracing

CSS

CSS Gradient Generator

Build linear, radial and conic gradients

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Border Radius Generator

Round corners, per corner or as blobs

CSS