Glassmorphism Generator

Runs in your browserDesign Tools#CSS#UI

Make frosted-glass CSS (backdrop-filter) over shapes, a photo or your own image. Copy CSS or Tailwind.

Backdrop
Glass cardFrosted panel over the backdrop. Try another backdrop or your own image.
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
color: #0f172a;

Presets

Glass

100% leaves colours as they are

Opacity of the white edge

Text

Text colour

Auto picks dark text from the tint and the backdrop.

How to use, limits & privacy

About Glassmorphism Generator

Create frosted-glass panels with CSS backdrop-filter and see the blur over bold shapes, a photo-like scene or your own image. Set the tint, blur, saturation, border and shadow, and the card text switches between dark and white so it stays readable. Copy the CSS or Tailwind classes. It runs in your browser.

How to Use

1

Choose a backdrop

Keep Shapes, pick Photo, or click the image button to use your own picture. Blur only shows when there is detail behind the glass.

2

Adjust the glass

Start from a preset such as Frosted or Dark, then change Tint, Tint opacity, Blur, Saturation, Border, Shadow and Corner radius.

3

Copy the code

Choose CSS or Tailwind and click Copy. Text colour is set to Auto, or you can force Dark or Light.

Privacy & Processing

  • Mode: local
  • Files Leave Browser: Local tool processing; review details below
  • Max Input Size: Device memory limits
  • Account Required: No
  • Data Stored Locally: Nothing is saved; settings reset when you reload or leave the page.
  • Network Processing: Assets or models may require an initial download

Everything runs in your browser. A backdrop image you choose stays on your device and is never uploaded.

Rules & Limitations

  • backdrop-filter needs a translucent background: at 100% tint opacity there is nothing to see through.
  • The CSS puts -webkit-backdrop-filter before backdrop-filter, for Safari before version 18.
  • Auto text colour is a guess from the average colour behind the card; check busy photos yourself.
  • Backdrop images must be under 25 MB.
  • Nothing is saved between visits.

Top Suggestions

  • Frosted navigation bars and modals over hero images
  • Glass cards for landing pages and portfolio sites
  • Trying a glass style on your own photo before building it
  • Getting backdrop-blur classes for a Tailwind project

Glassmorphism Generator FAQ

How do I make a glassmorphism effect in CSS?

Give the element a semi-transparent background such as rgba(255, 255, 255, 0.2), add backdrop-filter: blur(12px), a thin light border and a soft shadow. Place it over a colourful or detailed background, set it up here and copy the CSS.

Does glassmorphism work in all browsers?

Yes in current browsers: Chrome, Edge, Firefox (version 103 and later) and Safari all support backdrop-filter, and older Safari needs the -webkit- prefix that the code includes. In a browser without support the panel still shows its translucent tint, just without the blur.

Why is my backdrop-filter blur not working?

Usually the background is fully opaque, or there is nothing detailed behind the element, so the blur has nothing to soften. Lower the tint opacity and put the panel over an image or shapes. Check also that no parent clips the area the panel sits on.

What does saturate do in a glass effect?

saturate() makes the colours behind the glass richer after they are blurred, which gives the bright, Apple-style look. 100% leaves colours as they are, and 150% to 200% is typical. Set Saturation to 100% to leave it out of the code.

Which text colour should I use on a glass card?

Use dark text on light, bright glass and white text on dark glass. Auto picks the one with more contrast against the tint laid over the backdrop. On a busy photo, raise the tint opacity or blur so the text stays readable.

Is my backdrop image uploaded?

No. Your image is opened in your browser only, to show behind the preview, and is never sent anywhere. It is released when you choose another or leave the page.

Related Tools

CSS

CSS Box Shadow Generator

Design layered CSS box shadows with Tailwind and Material presets. Copy CSS or Tailwind classes.

Runs locallyOpen tool
CSS

CSS Gradient Generator

Make linear, radial and conic CSS gradients with draggable stops. Copy CSS or Tailwind, or share a link.

Runs locallyOpen tool
Accessibility

Color Contrast Checker

Check text and background contrast against WCAG 2.2 AA and AAA, or test a whole palette as a matrix.

Runs locallyOpen tool