Glassmorphism CSS Generator

Build a frosted-glass panel and copy the CSS. Set the blur, transparency, colour, saturation and border, watch it update over a colourful backdrop, then paste the code into your stylesheet. It runs in your browser.

This glassmorphism CSS generator builds a frosted-glass panel and gives you the CSS to paste in. Set the blur, transparency, tint, saturation and border to make a frosted glass card, a glass navbar, or a translucent overlay, and watch it update over a colourful backdrop. It focuses on the backdrop-filter blur effect that gives glassmorphism its look. It runs in your browser.

Read the guide: How to Create a Glassmorphism Effect in CSS
Frosted glass
CSS
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 20px;

How it works

  1. 1

    Set the frost

    Drag the blur and the background opacity until the panel reads as glass over the backdrop behind it.

  2. 2

    Tune the look

    Pick a tint colour, raise the saturation for a richer blur, and set the border strength and corner radius.

  3. 3

    Copy the CSS

    Press Copy CSS and paste the block onto your card or overlay. Keep something with detail behind it so the frost shows.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

What is glassmorphism?
It’s the frosted-glass style where a panel blurs and tints whatever sits behind it, so a card, menu or overlay looks like translucent glass. It works best over a photo or a gradient with some detail.
Why does my glass look solid instead of frosted?
The blur only affects content sitting behind the panel. If the background opacity is too high, or there is nothing behind the panel, the frost won’t show. Lower the opacity and place the panel over an image or gradient.
Can I also make gradients and shadows?
Yes. This tool is focused on frosted glass, with fine control over blur and saturation. For gradients, box-shadows, rounded corners and text-shadows in one place, use the full CSS Generator at /css-generator/.

More tools

JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.Code Formatter & MinifierPretty-print or minify JS, TS, CSS, HTML, JSON, SQL and more.YAML ⇄ JSON ⇄ TOML ConverterConvert config between YAML, JSON and TOML, both ways.JSON Schema Viewer & ValidatorRender a JSON Schema as a tree and validate data against it.Markdown Editor (Live Preview)Write Markdown with a live, side-by-side HTML preview.Mermaid Live EditorTurn Mermaid text into flowcharts and diagrams, live.

More from the Hivly network

Free sister tools on our other sites.

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Length ConverterMetres, feet, miles, inches, km and more, instantly.Word CounterCount words, characters, sentences and reading time live.