Glassmorphism Generator

About Glassmorphism generator

Glassmorphism is the frosted-panel look made with a translucent fill and a blur of whatever sits behind the element. This tool shows a panel over a purple-blue gradient and gives you six sliders that write the matching CSS, including the WebKit-prefixed line Safari expects.

How to use it

1. Choose a Background color with the color swatch; white is the default.
2. Drag Background opacity to set how see-through the fill is (0 to 100 percent).
3. Set Backdrop blur between 0 and 40 pixels. This is the frosting.
4. Adjust Border opacity for the thin white edge, Border radius up to 32 pixels, and Shadow intensity for the soft drop shadow.
5. Copy the six-line block from Generated CSS with the Copy CSS button.

The default settings

White fill at 15 percent, blur 10, border 30 percent, radius 16, shadow 30 percent

background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.30);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.30);

When to use it

• Styling a sticky navigation bar that lets the page content blur beneath it as you scroll.
• Making a login card float above a colorful or photographic background.
• Building a modal overlay panel that stays legible over busy imagery.
• Trying different fill colors, such as a dark tint, to see which gives text the best contrast.

Questions about Glassmorphism generator

Why does the blur do nothing on my page?

backdrop-filter only affects what is painted behind the element. If the fill is fully opaque or the element sits on a flat color, there is nothing to blur. Lower the background opacity and place it over an image or gradient.

Why does the output include -webkit-backdrop-filter?

Older Safari releases only recognized the prefixed name. Including both costs nothing and keeps the effect working there.

Can I change the border color?

The border is always a 1 pixel white line whose only adjustable property is opacity. The drop shadow is likewise always black at 0 4px 30px, with intensity controlling its alpha.

Is text on glass readable?

It depends on the backdrop. Thin translucent panels over bright areas often fail contrast checks, so test your final text and fill against the worst part of the background.

Related tools

• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• CSS filter generatorCombine blur, brightness, contrast, hue-rotate, saturate, sepia and more with a live image preview
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• Neumorphism generatorBuild soft-UI neumorphic elements with dual box-shadows derived from a single base color
• CSS transform generatorVisually combine translate, rotate, scale, and skew transforms with a live preview element
• Border radius generatorGenerate simple, per-corner, or asymmetric blob border-radius values with live shape preview