Super Boring Tools

Search tools

Find a tool by name or what it does.

Glassmorphism Generator

Build a frosted glass panel with a live preview and copy the CSS.

Preview

Glass settings

#ffffff

Higher transparency and border values show more of the tint color.

Preview background

The background is only used for the preview. It is not part of the copied CSS.

CSS
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px) saturate(180%);
-webkit-backdrop-filter: blur(8px) saturate(180%);

Apply this to an element with content or a background behind it, since the blur frosts whatever sits underneath.

How to create a glassmorphism CSS effect

  1. Set the blur and transparency

    Drag the blur slider to frost the background and the transparency slider to set how much of the tint fills the panel. The preview card updates as you move them.

  2. Pick a tint and border

    Choose a tint color and adjust the border and saturation to suit your interface. Every change restyles the glass immediately.

  3. Test against a background

    Switch between the background presets to check the frosted glass holds up over different colors and gradients.

  4. Copy the CSS

    The full rule with the fill, backdrop-filter, border, and radius sits below the controls. Click Copy CSS to grab it.

Why use this tool

Live frosted-glass preview

A sample card floats over a colorful gradient and re-renders with every slider move, so you judge the blur and tint by eye rather than by numbers.

Five glass controls plus tint

Blur, transparency, saturation, border, and corner radius each get their own slider, with a color picker for the glass tint.

Includes the Safari prefix

The output carries both backdrop-filter and the -webkit-backdrop-filter prefix, so the frosted effect renders in Safari as well as other browsers.

Test over several backgrounds

Swap the preview background between gradient presets to confirm the glass stays legible over both light and dark scenes.

Paste-ready declaration

The result is a complete block ending in semicolons, ready to drop onto any element without extra wrapping.

Runs entirely in your browser

Everything happens on your device; nothing is uploaded.

About this tool

This glassmorphism generator builds the frosted-glass effect from a handful of controls: a blur amount, a transparency level for the fill, a saturation boost, a border strength, a corner radius, and a tint color. Each change restyles a sample card floating over a colorful gradient and rewrites the CSS in the same instant, so the code you copy is exactly the glass you were looking at.

The frosted look depends on a translucent fill layered over a blurred, slightly saturated backdrop, with a faint light border to catch an edge. Those pieces interact, a heavy blur needs less fill and a busy background needs more, so tuning them against a live preview beats guessing in a stylesheet. You can switch the preview background between gradient presets to make sure the effect reads well over both light and dark scenes, since glass that looks crisp on one background can vanish on another.

The output includes the background fill, the blur and saturation, the border, the corner radius, and a soft shadow, along with the -webkit- prefix so it renders in Safari. Everything is generated in your browser with nothing to sign up for. Pair it with the CSS gradient generator for the background behind the glass, the box shadow generator to tune its depth, or the color converter when your tint starts out as an HSL or RGB value.

Frequently asked questions

What is glassmorphism?
Glassmorphism is a UI style where a panel looks like frosted glass: a translucent fill over a blurred, saturated backdrop, finished with a light border and a soft shadow. This tool builds that effect and gives you the CSS.
How do I use the generated CSS?
Copy the block and paste it onto the element you want to frost. The backdrop-filter blurs whatever sits behind the element, so it needs content or a background behind it to show the effect.
Why does the blur not show on my element?
The backdrop-filter only blurs content that is actually behind the element. If the element has nothing behind it, or its parent has no background, there is nothing to frost. Place it over an image or a gradient.
Does it work in Safari?
Yes. The output includes the -webkit-backdrop-filter prefix alongside the standard property, so the frosted effect renders in Safari as well as Chrome, Edge, and Firefox.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.

Related tools