Frosted glass effect on a website: frost in CSS

The frosted glass of a door lets light through and blurs shapes. Frost does the same to the background video: it blurs it slightly, just enough for text placed in front to read without having to darken the image. Of the library’s ten textures, it is the most useful for reading, and the most expensive for the browser.

Without

Frost

Where the effect comes from

In interfaces, frosted glass has become a material in its own right. Microsoft made it the acrylic of its Fluent design system: a translucent surface, made of a blur, a light noise and a tint, which adds depth and helps establish hierarchy on screen (Microsoft Learn). Apple, for its part, describes materials of varying thickness. The most opaque offer better contrast for text; the thinnest let the content beneath show through and help people keep their bearings (Apple, Human Interface Guidelines).

On the web, the effect goes through a CSS property, backdrop-filter, which applies a filter, a blur for example, to everything behind an element. It has worked in recent browsers since September 2024 (MDN).

When to use it

Frost rescues a background too detailed under text. Darkening the image further dims it; frost keeps it bright and removes its small details, the ones that fight with the letters. It helps:

• a restaurant or a grocery filmed in full service, with people and stalls;
• an event filmed in the crowd, under the spotlights;
• a lodging whose view, a busy street, a harbor, foliage, teems with detail;
• an agency whose background video is dense, full of small moving elements.

None of the studio’s twenty-four layouts applies it by default. It is taken as a remedy, when the page needs it, and the library’s stylesheet reserves it for busy video backgrounds.

When to skip it. On a plain background or a gradient, there is nothing to blur: the browser would pay for the computation for an invisible result. Same for a video that is already soft, a mist, calm water. And if the image itself carries the message, a craftsperson’s gesture or a dish being plated, blurring it takes away its argument.

The right dose

Frost is set to 3 pixels of blur, with saturation raised by 8% so the image doesn’t look washed out. Three pixels erase the small details, distant faces, lettering, leaves, and keep the masses and the colors. Stronger, it erases the shapes too, and the film loses its subject.

It sits between the background and the content: it blurs the video, and the text stays sharp. The library’s stylesheet keeps a record of a first version, laid over everything like the other layers: it blurred the whole page, text included, and made it unreadable.

Like the other textures, it leaves the first screen alone: the welcome video stays sharp, and the blur arrives with scrolling, behind the sections that follow. It therefore serves pages whose background stays visible under the content. Frost counts as one of the two textures at most; with vignetting, it makes a sober pair, one for the details, the other for the edges.

What it costs

It is the only texture in the library that really costs something. A blur applies to what is painted behind the element. As long as the video plays, that image changes, and the browser redoes the blur, over the whole surface, at every frame of the film.

The vendors say so, each in their own way. web.dev warns that backdrop-filter can hurt performance, and advises testing before going live. Microsoft writes that rendering its acrylic puts heavy demands on the graphics card, increases power consumption and reduces battery life; Windows replaces it with a solid color when battery saver is on.

In practice:

• reserve it for truly busy video backgrounds;
• test the page on an entry-level phone, as well as your computer;
• don’t stack two blurred surfaces: Microsoft also advises against it for its acrylic, which then creates distracting optical illusions.

The layer has no animation of its own. Its blur follows scrolling, from zero to three pixels, during the first screen, then stops moving; during that rise, the browser also recomputes the blur at each step.

Accessibility

• Contrast. The blur helps reading, and measuring is still necessary: at least 4.5 to 1 between body text and its background (WCAG 2.2, criterion 1.4.3), to check on the lightest passage of the film. Apple advises a thicker, and therefore more opaque, material when the text is thin.
• Reduced motion. When the visitor asks for less animation (prefers-reduced-motion), frost disappears, like grain. The library’s stylesheet gives the reason: without a moving film, it costs a lot and brings nothing. The background video then fades out, and its poster stays. If your system asks for this fallback, the image marked “Frost”, above, has stayed sharp.
• Reduced transparency. Windows, macOS and iOS also offer a setting to reduce transparency, which CSS reads through prefers-reduced-transparency. MDN still classes it as experimental, missing from several major browsers. In the studio, the frost fallback follows the motion setting.
• No flashing. The blur doesn’t pulse: nothing in it lights up or goes out.

How it is made

A full-screen, transparent layer carrying backdrop-filter: blur(): the browser blurs everything painted behind it (MDN). The layer is placed at level zero, above the animated background and below the content, and a media query removes it when reduced motion is requested.

.m.m--givre {
  z-index: 0;
  backdrop-filter: blur(calc(var(--givre, 3) * var(--m-voile, 1) * 1px)) saturate(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .m--givre { display: none; }
}

A trap, flagged by MDN: if a parent element of the layer has an opacity below 1, the filter no longer sees what is behind that parent, and the blur seems to do nothing.

In the studio

Frost is one of the library’s ten textures. You choose it at the “The texture” step, after the background, and only if the background is a busy video.