Acrylic

A frosted glass texture that blurs, tints and adds noise to what is behind it.

Wrap your content with ax-acrylic and it gets a texture of frosted glass: the background behind it is blurred, tinted and covered with a little noise. It needs something behind it to blur, so place it over an image, a video or a colorful page.

Acrylic runs on Surface, so the texture follows the shape of the element. It is also a layer of ax-surface. In browsers without backdrop-filter, the texture falls back to a plain color.

npm install @ax-design/acrylic

import { register } from '@ax-design/acrylic';
register();

<script src="https://unpkg.com/@ax-design/acrylic/build/main.js"></script>
<script>AxAcrylic.register();</script>

The tint is a color on top of the blurred background. A lower opacity shows more of the background; a higher one makes the text easier to read.

The blur radius sets how deep the blur is.

<ax-acrylic class="glass">
  Acrylic
</ax-acrylic>

.glass {
  --acrylic-tint-color: rgb(0, 0, 0);
  --acrylic-tint-opacity: 0.6;
  --acrylic-blur: 20px;
}

The blurred background is made more saturated and a bit darker before the tint is applied. This is what keeps the colors of the background alive behind the glass.

Lower the saturation to get a gray glass, raise the brightness for a light one.

.glass {
  --acrylic-saturate: 200%;
  --acrylic-brightness: 95%;
}

A layer of fine noise sits on top of the tint, like the grain of real acrylic. It is very faint by default. Raise it to see it.

In a browser without backdrop-filter, the noise is removed and the glass becomes the plain fallback color, always fully opaque so text stays readable.

.glass {
  --acrylic-noise-opacity: 0.03;
  --acrylic-fallback-color: rgb(30, 30, 30);
}

The glass follows the Surface shape properties, like --ax-radius and --ax-corner-shape. The blur is cut to the shape, whatever it is.

ax-acrylic {
  --ax-radius: 30%;
  --ax-corner-shape: round;
}

Acrylic is also a layer of ax-surface, so you can put it together with other layers on the same shape. Here acrylic and reveal highlight share a surface that tilts when you press it.

Move your pointer over the glass and press it.

import { register } from '@ax-design/surface';
import { registerAcrylicLayer } from '@ax-design/acrylic';
import { registerRevealLayer } from '@ax-design/reveal-highlight';

registerAcrylicLayer();
registerRevealLayer();
register();

<ax-surface class="glass" layers="acrylic reveal">Press me</ax-surface>

.glass {
  --ax-radius: 16px;
  --ax-tilt-mode: absolute;
  --ax-tilt-depth: 3px;
}

Reference