Skip to content
PithLab

↑↓ to move · Enter to open · Esc to close

Glassmorphism CSS Generator

Frosted glass cards with backdrop-filter, previewed live.

Glass card

The background shows through, blurred.

Presets:

The glass effect only shows over something colourful or detailed. Put the card on top of an image, gradient or shapes, as in the preview.

Use via API

Generate frosted-glass (glassmorphism) CSS: translucent background, backdrop blur and saturation (with the -webkit- prefix), border, radius and shadow. Send JSON, get JSON back.

POST https://pithlab.com/api/v1/tools/glassmorphism-generator

curl https://pithlab.com/api/v1/tools/glassmorphism-generator \
  -H "Authorization: Bearer $PITHLAB_KEY" \
  -H "Content-Type: application/json" \
  -d '{"blur":16,"transparency":25,"color":"#ffffff"}'

Fields and responseOpenAPI documentGet an API key

About the Glassmorphism Generator

Create frosted-glass CSS: set blur, opacity, colour, saturation, border, radius and shadow, preview it on a colourful background, and copy the CSS.

How to use the Glassmorphism Generator

  1. Start from a preset or the default frosted glass.
  2. Adjust the blur, opacity, saturation, border, corner radius and shadow. The preview card sits on colourful shapes so you can see the effect.
  3. Change the glass colour for tinted or dark glass.
  4. Copy the CSS, which includes the -webkit-backdrop-filter line Safari needs.

Examples

Default frosted glass

Input

blur 12, opacity 20%, #ffffff, saturation 180%, border 30%, radius 16, shadow 30%

Output

background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.111);
Dark glass

Input

blur 16, opacity 35%, #0f172a, saturation 160%, border 12%, radius 16, shadow 50%

Output

background: rgba(15, 23, 42, 0.35);
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.185);

Frequently asked questions

Why doesn't my glass look blurred?

backdrop-filter blurs whatever is behind the element, so there has to be something behind it: an image, gradient or other content. Over a plain colour the glass just looks like a translucent box. The background colour must also be partly transparent.

Does backdrop-filter work in every browser?

It works in all current browsers. Safari still benefits from the -webkit-backdrop-filter prefix, which the CSS includes. Older browsers simply show the semi-transparent background without blur.

Is glassmorphism bad for accessibility?

It can be. Text on glass sits over a changing background, so contrast can drop. Use a higher opacity, a darker or lighter tint, bold text and check contrast against the busiest part of the background.

Does backdrop-filter hurt performance?

Large blurred areas cost GPU time, especially on low-end phones and while scrolling. Keep blur radii moderate and avoid stacking many glass layers.