Glass Background Studio

How to use the glass background studio

1. Start from a preset such as iOS frosted, dark aurora, finance dashboard card or login card.
2. In Backdrop, choose a solid, linear or radial base and its colours, a blend mode for the blobs, and whether the blobs drift slowly.
3. In Blobs, pick a blob by number, then move it, resize it, change its colour and blur. Add up to six or remove down to two.
4. In Glass layers, edit up to three stacked layers: tint and opacity, backdrop blur, saturation, brightness, contrast, corner radius, gradient border highlight, inner highlight and outer shadow.
5. Set the text colour and grain, and switch on Preview without backdrop-filter to check the fallback.
6. Read the checks, then export CSS, HTML, a React component or Tailwind markup, or copy a share link.

How the effect is built

The scene is an isolated container with a gradient background. Each blob is an absolutely positioned circle with a CSS blur filter, layered behind the content. Each glass layer gets a translucent tint and a backdrop-filter chain such as blur(18px) saturate(160%), always emitted with the -webkit- prefix as well. The gradient border is a masked pseudo-element, so it follows the corner radius, and the grain is an inline SVG turbulence pattern, so nothing is downloaded.

Three safety nets are always included: an @supports not (backdrop-filter …) block with a near-opaque surface, the same surface under prefers-reduced-transparency: reduce, and, when blobs are animated, prefers-reduced-motion: reduce stops them.

Worked examples

Finance dashboard card. A deep green-to-navy gradient, a green and a blue blob, one dark glass layer at 40% opacity with an 18 px blur. White text stays above 4.5:1 even over the brightest blob, so the contrast check passes.

Modal overlay. Two layers: a nearly clear, lightly blurred full-screen layer that dims the page, and a more opaque card on top. Stacking layers is how you get depth without making text hard to read.

Neon hero. A near-black base with pink and cyan blobs in screen blend mode, slowly drifting. The motion check warns that animation under glass is expensive, and the export turns it off for reduced motion.

How to read the checks

• Contrast tests your text colour against every colour that can sit behind the glass — the base stops and each blob — seen through all the layers’ tints. Blur can mix colours but never makes them lighter than the lightest or darker than the darkest, so this is a true worst case.
• Fallback runs the same test on the no-blur surface.
• Blur adds up the blur of all layers; large totals are slow to paint over big areas.
• Motion flags animated blobs under glass.
• Stacking reminds you how backdrop-filter changes layering.

Tips and common mistakes

• Keep text on the top layer and raise its opacity until the contrast check passes.
• Use fewer, softer blobs for content-heavy pages; save vivid scenes for heroes.
• Never put menus inside a blurred header. Blur a pseudo-element or a sibling layer instead.
• Test the fallback. Some users turn transparency off; the design should still work.
• Limit glass to a few elements. Every blurred element is repainted when what’s behind it changes.

Limitations

The preview uses your colours, not a photo. If you place glass over images or video, check contrast against the actual content. Tailwind output covers the core effect; the gradient border, grain and reduced-transparency variant need the CSS export.