Skip to content
Gridtray

Glassmorphism Generator

Tune blur, tint, saturation and border for a frosted glass panel, preview it over your own colors, and check that text on it stays readable.

Glass

px
%
%
%
px

Behind and on the glass

Frosted panel

Text has to stay readable over everything that can pass behind the glass.

Text contrast, worst case 5.60:1
Text over the tint mixed with each color that can sit behind it.
AA pass
CSS
background: rgb(255 255 255 / 0.22);
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgb(255 255 255 / 0.3);
border-radius: 20px;

How to use the glassmorphism generator

  1. Set the blur and the tint color and its opacity.
  2. Raise saturation so colors behind the glass stay vivid instead of washing out.
  3. Change the shapes and page color behind the panel to match your design.
  4. Set the text color and read the worst-case contrast result.
  5. Copy the CSS; it includes the -webkit- prefix Safari needs.

How the effect works

backdrop-filter blurs whatever is behind an element. A semi-transparent background on top adds the frosted tint, and a faint light border catches the edge. Without something colorful behind it, glass is invisible, so it suits panels over photos, video or bold shapes.

Readable glass

Text on glass sits on a background that changes as content moves behind it. The checker mixes the tint with every color in your preview and reports the worst case. If it fails, raise the tint opacity before anything else; it is the most reliable fix.

Questions

Does backdrop-filter work in all browsers?

It works in current Chrome, Edge, Firefox and Safari. Safari still benefits from the -webkit-backdrop-filter line, which the output includes.

Is glassmorphism bad for performance?

Blurring is costly on large areas and on low-end phones. Keep glass panels small and avoid stacking several on top of each other.