Glassmorphism Generator

Glassmorphism generator for frosted glass CSS

This glassmorphism generator lets you design a frosted glass card visually and copy the CSS that produces it. You adjust blur, fill opacity, saturation, border, radius and shadow, test the card on eight preview backdrops, and export CSS, Tailwind CSS or SCSS. It is free, runs in your browser and needs no signup.

Glassmorphism is a UI style where a translucent panel blurs whatever sits behind it. Writing it by hand means juggling a semi-transparent background, a backdrop filter, a thin light border and a soft shadow. The tool shows every change live, so you tune the look by eye and then take the code.

How to use the glassmorphism generator

You build a glass card in a few moves: set the tint, tune the sliders, pick a backdrop, then copy the code in the format you need.

1. Choose a Glass tint with the color picker or type a HEX value. White gives classic frosted glass, and a dark tint gives smoked glass.
2. Drag Fill opacity, Backdrop blur and Saturation until the card looks right in the Frosted Glass Card Preview.
3. Set the Corner radius, Border color, Border opacity and Shadow opacity to finish the edges and depth.
4. Pick a Text color, then click through the preview backdrops (Sunset, Ocean, Pink, Mint, Peach, Slate, Night and Paper) to test the card on light, dark and colorful scenes.
5. Read the contrast note under the preview. Raise the fill opacity or change the text color if it warns you.
6. Open the CSS, Tailwind CSS or SCSS tab and click the copy button, or use Copy CSS or Copy Tailwind in the quick actions.

You can also click the card title and text in the preview and type your own words, so you judge legibility with real copy. Reset restores every default, and Share link copies a URL that restores your exact settings.

Glassmorphism CSS settings you can control

The tool exposes eight visual settings, and each one maps to a single CSS value. The table lists the range and default of the six sliders.

The Saturation slider uses the CSS saturate() filter function, where 100% leaves colors unchanged. Glass tint, Border color and Text color each accept a HEX value, and the text fields also understand short HEX codes such as #fff and CSS color names. If you need to convert a value first, the color converter handles HEX, RGB and HSL.

What is glassmorphism and how does backdrop-filter work?

Glassmorphism is a design style built on a translucent, blurred panel with a light border. The blur comes from the CSS backdrop-filter property, which, as MDN Web Docs explains, applies effects such as blurring or color shifting to the area behind an element.

Because the filter acts on what is behind the card, the card itself must be partly transparent. A fully opaque background hides the effect completely. That is why the generator pairs a low fill opacity with the blur.

Glass card CSS: a worked example

With a white tint at 20% fill, 12px blur, 120% saturation, a white border at 30% and a 16px radius, the generator writes a rule like this (shown here with Shadow opacity set to 0, so the shadow line is omitted):

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  color: #FFFFFF;
}

The tint #FFFFFF becomes rgba(255, 255, 255, 0.2): each HEX pair is read as a 0 to 255 channel, and the opacity slider becomes the alpha value. With the default Shadow opacity of 18%, the output also includes a box-shadow line.

How do you keep text readable on a glassmorphism card?

Keep body text at a contrast ratio of at least 4.5:1 against the glass surface. That is the WCAG 2.2 Level AA threshold in Success Criterion 1.4.3, Contrast (Minimum). Large text needs 3:1, and large means at least 24px, or 18.66px when bold.

Glass is harder than a flat panel, because the surface color changes with whatever sits behind it. White text on a white-tinted card over the pale Paper backdrop is close to 1:1 and effectively invisible. A dark backdrop such as Night usually gives white text more room, but the estimate tells you for sure.

Estimated text contrast on the glass

Under the preview, the tool shows the lowest estimated contrast between your text color and the glass over the selected backdrop. It checks the main colors of that scene, applies your saturation setting, blends your tint at the chosen opacity, and reports the worst case.

• 4.5:1 or more: passes WCAG AA for body text.
• 3:1 to 4.49:1: acceptable for large text only.
• Below 3:1: fails. Raise the fill opacity, choose a darker or lighter tint, or change the text color.

The figure is an estimate, because real pages have photos, gradients and moving content behind the glass. Test the final design with the contrast checker, or use the color legibility analyzer for a second opinion on a text and background pair.

Which CSS, Tailwind or SCSS glassmorphism output should you copy?

Copy plain CSS for most projects, Tailwind CSS if your markup uses utility classes, and SCSS if you want reusable variables and a mixin.

• CSS: a .glass-card rule with the -webkit-backdrop-filter prefix included for older Safari, followed by the standard backdrop-filter.
• Tailwind CSS: a div with utility classes using arbitrary values, such as backdrop-blur-[12px] and rounded-[16px]. The Copy Tailwind button copies just the class list.
• SCSS: variables for tint, opacity, blur, saturation, border and radius, plus a glass mixin and a .glass-card class that includes it.

Rename .glass-card to match your own naming. The preview backdrop is not part of any output, so you still need to supply a background image, gradient or photo behind the card in your own page.

Glassmorphism CSS tips and common mistakes

Most broken glass cards come from a short list of avoidable problems. Check these before you ship.

• Nothing behind the card. Blur on a flat white page changes nothing. Put a gradient, image or colorful shapes behind the glass. A mesh gradient generator is a quick way to make a rich backdrop.
• Fill opacity too low for text. At 10% to 20% the card looks elegant but text can fail contrast. Move toward 30% to 50% for paragraphs.
• Blur set too high. Large blur values over big areas can slow scrolling on low-powered devices. Start near the 12px default and raise it only if the scene behind is busy.
• Missing fallback. Add a more opaque solid background inside an @supports not (backdrop-filter: blur(1px)) block so unsupported browsers still show readable text.
• No edge definition. A faint 1px light border separates the card from the scene. Keep Border opacity around 20% to 40%.
• Stacked glass everywhere. Use the effect for a few key surfaces such as a hero card, modal or navigation bar, not every component.

To refine depth, you can fine-tune the shadow with the CSS box shadow generator. If you prefer a soft, raised look without transparency, see the neumorphism generator.

When does the frosted glass effect work best?

The frosted glass effect works best on a few elevated surfaces placed over a colorful or photographic background. Typical uses include dashboard cards, pricing panels, music or weather widgets, sticky navigation bars, modals and login screens.

Dark tints suit imagery with bright areas, while white tints suit saturated gradients. Switch between the Sunset, Slate and Paper backdrops to see how the same card behaves on very different scenes. If your design has one fixed background, choose the matching backdrop and tune against it.

For a richer scene behind your glass card, build a multicolor background with the gradient generator and paste the card CSS on top. You can also explore the full set of color tools to pick text and accent colors.