Overview
Generates the CSS for frosted-glass surfaces — backdrop-filter blur with a translucent white tint and a hairline border — previewed against a colourful live scene that shows exactly how the effect composites over real gradients.
How It Works
Set four sliders: Blur (0–60px), Background Opacity (0–60%), Border Width (0–4px), and Border Opacity (0–80%), or start from the Soft, Frosted, Heavy, or Subtle presets. The .glass rule updates live in the output panel, and Copy places the finished CSS on the clipboard.
Step-by-Step Usage Guide
- Pick a preset, or move the Blur slider until the scene behind the card looks right.
- Raise Background Opacity for a milkier pane; lower it for a clearer one.
- Set border width and border opacity for edge definition.
- Copy the .glass rule into your stylesheet.
Technical Specifications & Standards
The output emits backdrop-filter: blur(Npx) together with its -webkit-backdrop-filter twin for Safari, a background of translucent white for the tint, and a matching translucent border — the three ingredients that read as glass. The border radius is fixed at 16px and the tint is white only, which keeps the output predictable: the effect's character comes from blur depth plus tint opacity, and both sliders map linearly to the emitted values.
Targeted Use Cases
- Adding frosted panels over hero gradients and colourful illustrations.
- Creating overlay cards for modals that must stay readable over arbitrary content.
- Designing navigation bars with a glassy backdrop on image-heavy pages.
- Learning how blur, tint alpha, and border alpha interact before hand-tuning them.
Notes & Gotchas
- The tint is fixed white and the radius fixed at 16px — recolour the rgba values by hand after copying if your design needs a dark or brand-tinted glass.
- Test the copied rule over your real background. The preview scene is colourful by design; glass over a flat white page looks like nothing at all.
- The filter is blur-only — no saturate() boost, the other common glassmorphism ingredient. Add backdrop-filter: saturate(1.4) manually if you want richer colour bleed.
- There is no Tailwind or React format here — the output is a plain CSS class; adapt it to your styling system after copying.
Frequently Asked Questions
Why is the card white-tinted?
White tint is the classic glassmorphism look and keeps the emitted CSS predictable; edit the rgba colour in the copied rule for other tints.
Does it work in Safari?
The output includes -webkit-backdrop-filter alongside the standard property, which is what Safari requires.
Can I change the preview background?
No. The scene is a fixed multi-stop gradient, chosen because glass over colour shows the effect honestly.
Is there a shadow in the output?
No. The rule covers blur, tint, and border; add a box-shadow separately if your design wants elevation too.