Skip to main content
Toollyz

Search tools

Search for a command to run...

Glassmorphism Generator

Tune the four knobs glassmorphism actually needs: blur (0-40 px), saturation (0.5-3.0×), tint colour + alpha, and border colour + alpha. Live preview over six vivid background presets that show off the blur. Outputs production-ready CSS with the WebKit fallback. 100% offline.

What is the Glassmorphism Generator?

Glassmorphism Generator is a visual builder for the four-property CSS recipe used in iOS 7+, macOS Big Sur, Vision Pro, and modern dashboards: low-alpha background, `backdrop-filter: blur() saturate()`, a 1-px white border and a soft drop shadow. The on-page preview places your glass card over one of six gradient backgrounds (Sunset, Ocean, Forest, Candy, Midnight, Frost) — glassmorphism is only visible against something colourful behind it, so flat-white previews would defeat the point. Sliders cover blur (0-40 px), saturation (0.5-3.0× — bumps colours behind the glass), border radius (0-64 px), border width (0-6 px), shadow strength (0-100%), and dedicated colour-with-alpha pickers for the tint and border. Output ships both `backdrop-filter` and `-webkit-backdrop-filter` for Safari, plus the supporting background, border, radius and box-shadow lines.

How to use it

  1. Pick a background preset that's busy enough to see the blur (Sunset, Candy or Midnight work best).
  2. Drag the blur slider — somewhere between 14 and 22 px usually nails the iOS look.
  3. Push saturation to ~1.6× for vivid pops, or down to 1.0× for a desaturated 'frosted' feel.
  4. Tweak tint colour and alpha — low alpha + white tint is the classic recipe; dark tint + low alpha mimics Vision Pro dark mode.
  5. Click 'Copy CSS' for production-ready code with both the standard and -webkit-prefixed `backdrop-filter`.

Benefits

  • Six vivid background presets — glassmorphism is invisible on flat colours, so we ship the right canvas.
  • Four core sliders (blur, saturation, radius, border) plus tint and border colour + alpha pickers.
  • Live preview updates in real time as you drag.
  • Output ships the WebKit-prefixed `backdrop-filter` for Safari compatibility.
  • Shadow strength slider — glassmorphism without a slight drop shadow looks flat against light backgrounds.
  • Settings persist in localStorage — your preferred recipe is one tab-open away.
  • Pure CSS output — no SVG filters, no images, no JS.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

Why does my glass card look invisible?

Glassmorphism only works when there's something to blur. Place the card over a colourful gradient, photo, video or busy pattern. Over plain white or black there's nothing to blur and the effect disappears.

Does `backdrop-filter` work everywhere?

Every evergreen browser supports it — Chrome 76+, Firefox 103+, Safari 9+ (with -webkit prefix), Edge 79+. Mobile coverage is excellent. We ship both the standard and prefixed properties.

Why is the blur capped at 40 px?

Beyond ~30 px the effect stops looking like glass and starts looking like a fogged shower screen — content behind becomes unreadable. We cap at 40 px to keep the preview useful, but you can hand-edit the CSS if you really want 60 px.

What does the saturation slider do?

It multiplies the saturation of the blurred content underneath. 1.0× is unchanged; 1.6× makes colours pop through the glass like the iOS Control Center; 0.7× washes them out for a quieter look.

Why is performance bad on my page?

`backdrop-filter` is GPU-intensive — animating a backdrop-blurred element at 60 fps can stutter on lower-end devices. Avoid blurring full-screen overlays during scroll; prefer small cards or use `transform` instead of layout-affecting animations.

Can I use this on dark mode?

Yes — drop the tint alpha low and switch the tint colour to white-ish or pure white. The Vision Pro / iOS dark-mode look is `rgba(255,255,255,0.08)` with high blur and high saturation.

Why does the preview have a shadow if I set shadow to 0?

It shouldn't — at 0 the box-shadow value becomes `0 8px 32px rgba(0,0,0,0.00)`, which renders nothing. If you see a shadow at 0%, your browser may be rendering a default element shadow from elsewhere.

Does it use SVG filters?

No — pure CSS. `backdrop-filter: blur()` is implemented natively by the browser's compositor. No SVG, no images, no canvas.

Can I export an image of the preview?

Not from this tool — the output is CSS for you to drop into your own page. Use the browser's screenshot tool or the Code Screenshot Generator if you need an image.

Are settings saved between visits?

Yes — your blur, saturation, tint, border and background all persist in localStorage under `toollyz:glassmorphism`.

Is anything uploaded?

No. Toollyz is statically exported with no backend — preview and CSS generation run entirely in your browser.

Related tools

See all image tools