What is glassmorphism?

Glassmorphism is a style where panels look like frosted glass: semi-transparent, blurred backdrop, soft border and light shadow.

Is backdrop-filter supported?

All modern browsers support backdrop-filter. The generated code includes the -webkit- prefix for Safari.

Can I copy the generated CSS?

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

Is anything uploaded to a server?

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Can I share my design?

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

CSS Glassmorphism Generator

Create the frosted-glass look used in modern interfaces. Tune the tint, transparency, blur, saturation and border, over a customizable background gradient.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Presets

Tint color

Transparency10%

Blur14px

Saturation180%

Border opacity20%

Radius16px

Shadow

Backdrop 1

Backdrop 2

Live preview

Generated CSS

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

// Example output

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

// Features

▸backdrop-filter blur and saturation
▸Tint color and transparency
▸Border opacity and shadow
▸Presets: Dark, Light, Green, Neon, Frosted
▸Adjustable backdrop gradient

// How to use

01Adjust the controls on the left or pick a preset to start the CSS Glassmorphism Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Neumorphism Generator

Create soft-UI neumorphic surfaces with flat, concave, convex and pressed shapes from a single base color.

CSS Gradient Generator

Build linear, radial and conic CSS gradients with draggable color stops, presets and instant copy-ready code.

CSS Card Generator

Generate content cards with background, border, radius, padding, shadow and hover-lift effects.