CSS Glassmorphism Generator

How do you generate frosted-glass CSS with a solid fallback?

Choose Glass tint color, adjust Blur and Background opacity, and click Copy CSS in the CSS tab. The generator creates a .glass rule for a translucent surface with backdrop blur, saturation, rounded corners and a border. Leave Include fallback checked to start with an opaque surface and apply the glass effect inside a feature-support condition.

The initial settings provide a reproducible starting point rather than requiring you to guess every value. With the white tint, the translucent background is rgba(255, 255, 255, 0.25). Both filter declarations use blur(12px) saturate(1.8). The border is 1px solid rgba(255, 255, 255, 0.18), and the radius is 16px. Shadow and grain start at zero, so neither is added to the default output.

Default glass settings and their generated declarations

Control	Initial value	Effect in output
Glass tint color and Background opacity	#ffffff and 0.25	rgba(255, 255, 255, 0.25)
Blur and Saturation	12px and 1.8x	blur(12px) saturate(1.8)
Border width and Border opacity	1px and 0.18	1px solid rgba(255, 255, 255, 0.18)
Border radius	16px	border-radius: 16px

Which controls change the glass surface?

Blur ranges from 0 to 40px in 1px steps. Background opacity ranges from 0 to 1 in steps of 0.05. These controls solve different problems: blur changes the backdrop filter, while opacity changes the tint's alpha value. Increasing opacity does not increase the blur radius. At opacity 1, the opaque tint covers the backdrop; at blur 0, the filter provides no blur.

Saturation ranges from 0 to 3x in 0.1 steps and is written after blur in the filter declaration. Border opacity ranges from 0 to 1 in 0.02 steps, border width from 0 to 4px, and radius from 0 to 48px. The border uses the same tint color as the surface, with its own opacity. Set width to zero when you want no visible border rather than trying to match its color to every background.

How do shadow and noise grain change the output?

Shadow blur ranges from 0 to 60px, but a shadow is emitted only when Shadow opacity is greater than zero. For example, set Shadow blur to 24 and Shadow opacity to 0.2 to produce box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2). The horizontal offset stays at zero and the vertical offset stays at 8px; there are no offset sliders. For adjustable shadow offsets, use the CSS Box Shadow Generator.

Noise grain ranges from 0 to 0.5 in steps of 0.05. A positive value adds an embedded SVG background image containing a 120 by 120 turbulence tile. This texture is generated as a data URI, so the grain does not require a separate image file. With grain at zero, the generator omits that background-image declaration.

How can you test glass on a custom background?

Preview background offers Gradient, Sunset, Ocean, Forest and Dark presets. Custom color or gradient accepts supported CSS colors and gradients; it rejects URL-based image values. Use Your own image for a local file instead. The image appears behind the card through a temporary object URL, and Reset clears that image and the custom entry while returning to the first preset. Reset leaves the glass controls unchanged.

The preview background is separate from the exported surface styles. Copying CSS does not include the selected photo or preset gradient as a page background. Supply that backdrop in your own layout and apply the generated glass class to the element above it. Preview text color also changes only the preview and contrast estimate; the export does not set your text color, card dimensions or content.

How should you interpret Estimated contrast?

The estimate compares your selected text color with a single blended color. For each red, green and blue channel, the blend is rounded from tint × opacity + backdrop × (1 − opacity). With white tint at 0.25 opacity over a custom black background, each channel becomes round(255 × 0.25 + 0 × 0.75) = 64, producing #404040 for the contrast calculation.

Preset backgrounds have representative sample colors. For a custom gradient, the tool averages the recognized three-digit and six-digit hex colors without weighting their stop positions. For an image, it draws the image onto a 1 by 1 canvas and reads that pixel. If no sample is available, the estimate says unavailable. Neither blur nor saturation enters this estimate, so it cannot verify readability at every point on a photograph. Check your actual foreground and background pairs with the Contrast Checker and inspect text over the final layout.

What differs between CSS, Tailwind and SCSS exports?

CSS exports a .glass class, including both unprefixed and prefixed backdrop-filter declarations. With Include fallback checked, the base rule uses the tint at opacity 1. An @supports block enables the translucent surface when either filter property is supported. A later prefers-reduced-transparency: reduce rule restores the opaque tint and removes filters and any generated grain.

SCSS provides variables, a glass mixin and a class using that mixin, with the same fallback option. Tailwind provides a space-separated class string, including backdrop-blur-[12px] at the initial blur setting. It does not export the fallback or reduced-transparency rules. Choose the format that fits your stylesheet, then use Copy CSS, Copy Tailwind or Copy SCSS to copy that output. Review the pasted styles together with your real backdrop and text color before using the card in a page.