Skip to content
Musterli

Glass and Border Effects

Frosted glass, gradient borders and glows for cards and hero sections. Real CSS with a live preview, ready to copy as CSS, Tailwind or HTML.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the Glass and Border Effects

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

Glass and border effects are CSS surfaces for cards, dialogs and hero sections: frosted glass with backdrop-filter, borders with a gradient (rotating if you like) and colored glows. The tool shows the effect as real CSS on a Musterli background and gives you the code.

How it works

Pick glass, gradient border or glow. For glass, set blur, tint, saturation, inner border and grain; for the border, its colors, width and rotation; for the glow, its color, reach and strength. Switch the background under Stage. Press Space for new variations. Copy CSS, Tailwind classes or an HTML example.

Try the Glass and Border Effects now

FAQ

Does the glass effect work in Safari?
Yes. The code also writes backdrop-filter with the -webkit- prefix, which Safari needs before version 18. Chrome, Edge and Firefox support backdrop-filter without a prefix.
Why is there no PNG of the glass?
Glass blurs whatever lies behind it on your page. An image would only capture the background in this tool. Gradient borders and glows can be exported as PNG or WebP.
What happens to the rotating border with reduced motion?
People who ask their system for less motion see a still border: the code includes a prefers-reduced-motion rule. Browsers without @property show the static border too.
Is text on glass readable?
That depends on the tint and the background. The tool checks the contrast of your text color on the tinted glass and shows a hint when it misses WCAG AA at 4.5:1.

Related generators

All generators in CSS effects and layouts