Generator Tools

CSS Glassmorphism Generator

Build a frosted glass surface with live preview. Tune blur, tint, border, and shadow, then copy CSS, React style, or Tailwind classes.

Quick presets

Each preset replaces every setting. Tweak any slider afterward.

Live preview

Glass card

Frosted surface

The translucent fill sits over the blurred backdrop. Drop your content inside this rule.

Background

The preview uses real CSS backdrop-filter. If your browser does not support it, the surface still shows the tint fill, border, and shadow without the blur.

CSS output

.glass {
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px) saturate(180%) brightness(110%);
  -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(110%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0px 24px 48px -8px rgba(15, 23, 42, 0.35);
}

Includes both the standard backdrop-filter and the WebKit prefixed property so Safari and recent Android WebViews render the blur as well.

React inline style

const glassStyle = {
  backgroundColor: "rgba(255, 255, 255, 0.18)",
  backdropFilter: "blur(14px) saturate(180%) brightness(110%)",
  WebkitBackdropFilter: "blur(14px) saturate(180%) brightness(110%)",
  border: "1px solid rgba(255, 255, 255, 0.35)",
  borderRadius: "24px",
  padding: "32px",
  boxShadow: "0px 24px 48px -8px rgba(15, 23, 42, 0.35)",
};

Drop the object into a React component as the value of the style prop on the glass element.

Tailwind v3+ classes

bg-[rgba(255,255,255,0.18)] backdrop-[blur(14px)_saturate(180%)_brightness(110%)] border-[1px] border-[rgba(255,255,255,0.35)] rounded-[24px] p-[32px] shadow-[0px_24px_48px_-8px_rgba(15,_23,_42,_0.35)]

Uses Tailwind arbitrary values, supported in Tailwind v3 and later. Underscores stand in for spaces inside brackets.

Backdrop blur

How the area behind the glass is filtered. Most of the look comes from these four values.

Blur14px

0 disables the blur. Most frosted surfaces use 8 to 24px.

Saturation180%

100% is identity. Higher values pull richer colors through the blur.

Brightness110%

100% is identity. Use below 100% for dim glass, above for bright glass.

Contrast100%

100% is identity. Lower values flatten the backdrop, higher boost it.(identity, no visible change)

Tint and shape

The translucent plate that sits over the blurred backdrop, plus the surface shape.

Tint color

Opacity18%

Most glass uses white at 10 to 25% opacity over photos, or a dark hex over dark UIs.

Preview text as light (for dark tints)

Border radius24px

Set to 999 with a preset for a pill shape.

Padding32px

Inner padding so content does not touch the glass edge.

Border highlight

A thin, slightly translucent border is what sells the glass look against most backgrounds.

Border width1px

1px is the most common. 0 turns the border off.

Border color

Opacity35%

White at 25 to 50% opacity gives the classic top-edge highlight.

Outer shadow

Lifts the glass off the page. Optional.

X offset0px

Y offset24px

Blur48px

Spread-8px

Shadow color

Opacity35%

Glassmorphism requires browser support for backdrop-filter. It is available in current Chrome, Edge, Firefox, and Safari. Always test contrast: use the dark-tint toggle when the glass sits over a busy photo, and increase the tint alpha if the text underneath competes with the content on top.

How to use

Pick a preset to start from a known good look, or leave the defaults and tune from there.
Drag the backdrop sliders (Blur, Saturation, Brightness, Contrast) to shape how the area behind the glass is filtered.
Pick a tint color and opacity for the translucent plate over the blur. Use the dark tint toggle to preview text as light when your tint is dark.
Adjust the border width, border color and opacity, border radius, and inner padding. Optionally turn on the outer shadow and set its offsets, blur, spread, and color.
Switch the preview between Card, Pill, Nav bar, and Modal shapes and between Photo, Gradient, Neon, Dark, and Light backgrounds to confirm the glass reads everywhere.
Copy the CSS block, the React style object, or the Tailwind class chain and paste it into your project.

About this tool

CSS Glassmorphism Generator builds a frosted glass surface using the CSS backdrop-filter property combined with a translucent fill, a thin highlight border, and an optional outer shadow. Adjust four backdrop knobs (blur in pixels, saturation, brightness, and contrast), pick a tint color and opacity for the plate that sits over the blur, set border width and color with independent opacity, choose a border radius and inner padding, and add a configurable drop shadow with X and Y offsets, blur, spread, color, and opacity. The live preview applies your exact values to a card, pill, navigation bar, or modal mounted over five different backgrounds (a colorful photo simulation, a vivid gradient, a neon scene, a dark wall, and a light wall) so you can confirm the glass reads well in the contexts you actually ship. Presets cover the most common looks at one click: the classic Frosted material, a Subtle nav bar style, a Dark glass for dark mode UIs, an iOS-style translucent material with stronger saturation, a Neon edge variant with a colored glow, a small Minimal pill for chips, and a Heavy fog modal backdrop. The tool emits three copy-ready outputs. The CSS block targets a .glass selector and pairs the standard backdrop-filter with the -webkit-backdrop-filter fallback that Safari and recent Android WebViews still require to render the blur. The React inline style object uses camelCase keys including WebkitBackdropFilter so it pastes directly into a style prop. The Tailwind chain uses v3+ arbitrary-value syntax with bg-[rgba()], backdrop-[blur() saturate()], border-[1px], border-[rgba()], rounded-[24px], p-[32px], and shadow-[]; underscores stand in for spaces inside brackets per Tailwind conventions. Useful for building login cards over hero images, translucent navigation bars that sit over scrolling content, modal dialogs that read on any backdrop, status pills that float over busy dashboards, or any design that needs a tasteful frosted material. All work is local. The settings are component state and the copy helpers use your browser clipboard. Nothing is uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Glassmorphism Generator

How to use

About this tool

You may also like

CSS Gradient Generator

CSS Filter Generator

CSS Box Shadow Generator

CSS Border Radius Generator

Color Format Converter

HEX to RGB Converter