CODDY Tool

Glassmorphism Generator

Frosted-glass CSS cards — blur, tint and border, with a live preview over a real backdrop.

Build the frosted-glass effect — a blurred, translucent panel with a soft light border — with sliders for blur, tint and opacity, previewed over an actual colourful background rather than a flat colour it would be invisible against.

Everything you enter stays in this browser tab. Nothing is sent to our servers, logged or stored.

Loading tool…

About Glassmorphism Generator

Glassmorphism is the frosted-glass panel look — a translucent surface that blurs and slightly tints whatever sits behind it, with a thin, soft light border standing in for a physical edge catching light. Three CSS properties do all the work: a semi-transparent background colour for the tint, backdrop-filter: blur() for the frosting, and a low-opacity border for the edge highlight.

backdrop-filter is what makes it read as glass rather than just a translucent box — without it, a semi-transparent panel just shows a flattened, unblurred version of what's behind it, which looks like a dirty overlay, not glass. The saturation boost alongside the blur is a smaller but real detail: real frosted glass tends to make colours behind it pop slightly rather than just muting them, and saturate() reproduces that.

The preview sits over an actual gradient backdrop rather than a flat colour deliberately — glassmorphism is genuinely invisible over a single flat colour, since there is no detail behind the panel for the blur to do anything with. Swap the preset backdrop to see how the same settings read differently over different colours and contrast levels.

How to build a glassmorphism card

  1. Pick a backdrop

    For the live preview only — swap it to see how the glass reads over different colours.

  2. Set the tint and its opacity

    White is the classic look; a dark tint gives smoked glass.

  3. Adjust blur and saturation

    More blur reads as thicker glass; more saturation makes colours behind it pop.

  4. Copy the CSS

    Includes the -webkit- prefix older Safari still needs.

Frequently asked questions

Why is the glass card invisible in my design?

backdrop-filter blurs and tints whatever is directly behind the element — over a flat, single-colour background there is nothing for the blur to act on, so the effect essentially disappears. It needs a photo, a gradient, or other varied content behind it to read as glass.

Is backdrop-filter well supported?

Broadly yes in current browsers, but it needed the -webkit- prefix in Safari until relatively recently, which is why both properties are included in the output. Very old browser versions may not support it at all, in which case the panel falls back to a plain translucent box — a reasonable degradation, not a broken one.

Why does my glass panel look grey and flat?

Usually too little saturation boost, or a tint opacity high enough to wash out what's behind it. Real frosted glass keeps some of the colour and contrast of what it's over — try lowering the tint opacity and raising the saturation boost.

Should the tint be white or black?

White is the classic frosted-glass panel and reads well over most colourful backgrounds. A dark or black tint gives a smoked-glass look instead, which pairs better with a light backdrop where a white panel would otherwise wash out.

Related tools

All Color & Design Tools

Mesh Gradient Generator

Color & Design Tools

Build a soft, multi-colour mesh gradient by placing colour points on a canvas.

Neumorphism Generator

Color & Design Tools

Soft UI shadows in any colour — raised, pressed, convex or concave.

Box Shadow Generator

Color & Design Tools

Design layered CSS box shadows with a live preview and copy the code.

CSS Gradient Generator

Color & Design Tools

Create linear, radial and conic CSS gradients with a live preview.

Color Palette Generator

Color & Design Tools

Build harmonious colour palettes from one base colour, ready to copy as CSS.

Glassmorphism Generator is free to use with no account, no watermark and no usage limits. Last updated 3 September 2026.