Glassmorphism Generator

Create a frosted-glass panel with adjustable blur, saturation, tint, border, radius and shadow. Copy CSS or Tailwind classes, or download a PNG of the preview. The CSS includes prefixed and unprefixed backdrop-filter declarations and can include an opaque version of the chosen tint for reduced-transparency preferences.

Local-only

Presets

Pick a preset to set every control at once, then adjust from there.

Blur20pxSaturation180%Keep the blur under about 20px. Beyond that the browser is re-blurring a live snapshot of the page on every scroll frame, which is where a frosted header starts dropping frames on a mid-range phone.Tint opacity0.12

Tint color

Border1px

Highlight

Highlight strength0.25Radius24pxShadow28Reduced transparency fallbackUse an opaque version of the selected tint when the browser reports reduced transparency. Support varies by browser and operating system.

CSS

.glass {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.12);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.28);
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

backdrop-filter blurs whatever is painted behind the element — the page, an image, another component. Put a solid or gradient layer behind the glass in the preview above to see what a real page looks like under it.

Tailwind classes

rounded-[24px] border-[1px] border-[color:rgb(255_255_255_/_0.25)] bg-[rgb(255_255_255_/_0.12)] backdrop-blur-[20px] backdrop-saturate-[1.80] shadow-[0_8px_32px_rgb(0_0_0_/_0.28)] bg-clip-padding [@media(prefers-reduced-transparency:reduce)]:bg-[rgb(255_255_255_/_1)] [@media(prefers-reduced-transparency:reduce)]:[backdrop-filter:none] [@media(prefers-reduced-transparency:reduce)]:[-webkit-backdrop-filter:none]

The export includes both prefixed and unprefixed backdrop-filter declarations for compatibility with older browsers.

How does Glassmorphism Generator work?

Frosted glass combines a translucent tint, backdrop blur and saturation with a border, rounded corners and optional shadow. The result depends on what is painted behind the element. Use a varied backdrop to assess the effect and check text contrast.

The CSS includes backdrop-filter and -webkit-backdrop-filter for older browsers, plus background-clip: padding-box. Tailwind uses exact arbitrary values. The preview is a self-contained SVG illustration; its blur uses the same standard-deviation value as CSS blur().

With the reduced-transparency fallback enabled, browsers that report the preference use an opaque version of the selected tint and disable backdrop filtering. The CSS and Tailwind exports both include it. Support varies by browser and operating system; check contrast in both states.

The PNG is rasterized from the same SVG used by the preview. It includes a sample backdrop, so it is an illustration of the effect rather than a transparent CSS material. Large blurred surfaces and animation can cost more rendering work; test your chosen settings on the target devices.

Panel settings

blur  20px   saturate 180%
tint  #ffffff at 12%
border 1px #ffffff at 25%

Generated CSS

.glass {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.12);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

What options and edge cases does Glassmorphism Generator support?

What each control does
Parameter	Type	Default	Behaviour & edge cases
blur(Xpx)	length	20px	Gaussian standard deviation in CSS pixels; SVG uses the same value.
saturate(X%)	percentage	180%	A multiplier of backdrop saturation: 100% leaves it unchanged.
background-color	rgb at alpha	white 12%	Opacity of the tint over the filtered backdrop.
border	width + colour	1px white 25%	Color and opacity of the highlight along the panel edge.
background-clip	padding-box	on	Keeps the translucent tint within the border instead of painting beneath it.
-webkit- prefixed	duplicate line	on	Both declarations are emitted for compatibility with older browsers.
prefers-reduced-transparency	media query	on	When supported, the selected opaque tint replaces the translucent background and filters are disabled.

Frequently asked questions

How do I make a frosted-glass panel?

Use a translucent background with backdrop-filter: blur() saturate(), a border and rounded corners. Place something varied behind it and check text contrast.

Why does backdrop-filter do nothing?

Check that the element overlaps visible backdrop content and that its background is translucent. Clipping and backdrop roots can affect the result. The export includes prefixed and unprefixed declarations for older browsers.

Can glassmorphism affect performance?

Yes, especially on large or moving surfaces. A small static panel usually requires less work than a full-screen animated backdrop. Test on your intended devices.

How does the reduced-transparency fallback work?

When enabled, the exports use an opaque version of the selected tint and disable backdrop filtering when the browser reports prefers-reduced-transparency: reduce. Support varies by browser and operating system. Check text contrast in both modes.

Is the preview the same as my CSS panel?

The preview illustrates the settings with SVG and a sample backdrop. The PNG uses the same SVG. CSS filters the actual content behind your element, so the appearance also depends on your page.

Why does the panel look washed out?

A neutral tint, high opacity or a flat backdrop can reduce contrast. Adjust the tint and opacity, and use background-clip: padding-box to keep the tint within the border.

ToolsByUs team · How we check our tools