Back to Tools

Glassmorphism Generator

Create frosted-glass effects with modern translucent aesthetics

Ultra Premium

Glass Properties

Transparency: 0.45

Blur: 10px

Shine / Reflection: 0.2

Environment

Glass Tint

Border: 0.2

Saturate: 100%

Rounding: 16px

Frosted Glass Preview

Glass Element

Modern UI Component

Frosted glass effects without guesswork

Glassmorphism is the translucent, blurred-panel look used in many modern dashboards and mobile interfaces. It depends on several properties working together: a semi-transparent background, a backdrop blur, a faint light border and rounded corners. This generator exposes each one as a slider so you can see the panel change against a real backdrop and then copy the CSS.

Tuning the glass

Under Glass Properties, set Transparency (0 to 1), Blur (0 to 40 pixels) and Shine / Reflection (0 to 1).
In Environment, choose a backdrop: Abstract Wave, Mountains, Night Sky or Soft Gradient. Then pick a Glass Tint colour.
Use the bottom row to adjust Border opacity, Saturate (0 to 300 percent) and Rounding (0 to 100 pixels).
Click Generate Glass Effect. A panel titled Glass Element appears on the chosen background, and the code shows below it.
Press Copy CSS to copy the declarations.

Moving any slider hides the earlier result, so click the button again after each round of adjustments to see the updated panel and code.

What the code contains

A background colour built from your tint and transparency as an rgba value.
A backdrop-filter with blur and saturate, plus the -webkit- prefixed version for Safari.
A border-radius and a one pixel border in translucent white.
When shine is above zero, a diagonal background-image gradient of translucent white at both corners that fades to nothing in the middle, imitating light reflecting off glass.

Good places for it

Login cards and hero panels over photography.
Navigation bars and sidebars that sit on top of scrolling content.
Music players, weather widgets and similar overlays.
Modal windows that should keep the page visible behind them.

Things to remember

The effect only appears when something interesting sits behind the element. On a flat white page a glass panel just looks pale. The three photo backdrops in the preview are loaded from an external image service, so you need an internet connection to see them, and they are only for previewing; the copied CSS does not include any background image. Bring your own backdrop.

Text on glass can lose contrast, especially at high transparency, so test readability with your real content. Backdrop blur can also be demanding on older phones when applied to large or many elements. Keep blur values moderate, and consider a solid fallback colour for browsers that do not support backdrop-filter.

Related Tools

Frequently Asked Questions

Does the copied CSS include the background image?

No. The backdrop choices are only for previewing the glass effect. The copied code contains just the glass panel styles, so you need to supply your own image or gradient behind the element.

Why does my panel look plain when I use the code?

Glassmorphism works by blurring whatever lies behind the element. If the page behind it is a flat colour there is nothing to blur. Place the panel over an image, gradient or busy content.

What does the Shine slider do?

When above zero it adds a diagonal gradient of translucent white on the corners of the panel, fading to clear in the centre. At zero the extra background-image line is left out.

Is the Safari prefix included?

Yes. The output has both backdrop-filter and -webkit-backdrop-filter with the same blur and saturate values, so the effect also works in browsers that still expect the prefixed property name for it.

Why do the preview photos not load?

Three of the four environments are photographs fetched from an online image service. Without a connection, or if the service is blocked, they will not display. The Soft Gradient option is generated locally and always shows.