Glass

<r-glass>APIStyle tokensPlaygroundSource

A liquid glass surface. Pick a material and the pane is done: it frosts what is behind it, bends that at a curved edge the way a lens does, splits the colors slightly at the rim and lights the edge. Any single value can be overridden by an attribute of the same name. Content goes in the default slot and takes an ink that reads on the glass.

Use when a panel sits over rich, colorful content: a hero card, a floating toolbar, a media overlay. Over a flat background there is nothing to bend and the effect disappears.

Playground

Drag the glass, switch the material and the backdrop, and copy the markup. The snippet only carries what differs from the material.

Frosted panel

drag or use arrow keys · tune the knobs

Reset

Material

materialregularthinthickclear

Optics

blur16pxsaturate180%displace18pxbevel28pxdispersion25%

Shape and light

radius24pxwidth340pxspecular100%toneautodarklightrimsheeninteractive

Backdrop

backdrop

Your image

Copy

<r-glass style="width:340px">
  …
</r-glass>

<r-glass material="clear" backdrop>
  <div class="panel">…</div>
</r-glass>

Materials

Four materials cover most uses. regular is the default.

thin

regular

thick

clear

<r-glass material="thin">…</r-glass>
<r-glass>…regular…</r-glass>
<r-glass material="thick">…</r-glass>
<r-glass material="clear">…</r-glass>

Over an image

Add backdrop when the glass sits over an <img> or <video>. Without a value it uses the first image or video in the glass's parent; a selector names another one. The glass then reads that element's pixels with WebGL2 and refracts each wavelength by its own amount, in every engine with WebGL2, where the CSS path bends light only in Chromium. The image stays in the page, so its alt text and the content around it are unchanged.

Refracted with WebGL2

<div class="hero">
  <img src="hero.jpg" alt="…" />
  <r-glass material="clear" backdrop rim>…</r-glass>
</div>

A cross-origin image needs crossorigin and a CORS response to be readable; otherwise the glass keeps its CSS frost.

Tone and ink

tone says what is behind the glass. On a dark or colorful backdrop the edge is lit and the content is white; on a pale one a white edge disappears, so the edge is shaded and the content turns dark. Over a backdrop image the tone follows the brightness of the covered area unless you set it. The tone in effect is available as :state(light) and :state(dark), and --ran-glass-ink overrides the content color.

The tone follows the image

r-glass:state(light) .badge {
  border-color: rgb(0 0 0 / 0.2);
}

Nesting

<r-glass> composes: nest one inside another for layered materials, such as a glass toolbar on a glass panel. Each layer bends what is behind it.

<r-glass radius="28">
  <div class="panel">
    Outer panel
    <r-glass material="thin" radius="16">
      <div class="toolbar">Nested glass toolbar</div>
    </r-glass>
  </div>
</r-glass>

API Reference

Properties

Refraction displace

displace sets how far the edge pulls what is behind it toward the center, so the backdrop just inside the rim is stretched over it, the way a thick convex edge magnifies. bevel sets how wide that curved band is. Above half the bevel the edge folds the image back on itself, as the rim of real thick glass does.

displace = 0

displace = 40

<r-glass material="clear" displace="0">…flat…</r-glass> <r-glass material="clear" displace="40">…lensed edge…</r-glass>

Sheen & interactive

sheen adds a moving highlight; interactive adds a hover lift and a press that settles back.

<r-glass sheen interactive>
  <div>Hover &amp; press me</div>
</r-glass>

Rim — GPU specular edge (opt-in)

rim draws the edge on the GPU: a bright outer wall and a fainter inner wall where the bevel meets the flat face, lit by a key light from the top left and a dim fill from the bottom right, with thickness that varies along the edge and occasional glints. On a light tone the walls are shaded instead. It never samples the backdrop: the shader only knows the pane's size, radius and bevel. It renders on WebGL first, moves to WebGPU in the background when the browser has it, and leaves the CSS highlight alone when neither is available.

<r-glass>…CSS highlight…</r-glass> <r-glass rim>…GPU-lit edge…</r-glass>

CSS parts & tokens

Style internals with ::part(glass), ::part(specular), ::part(refraction) and, when rim is set, ::part(rim), or override the --ran-glass-* custom properties:

r-glass {
  --ran-glass-tint: linear-gradient(135deg, rgb(0 0 0 / 0.2), transparent);
}

Notes

• Two paths. Without backdrop, backdrop-filter frosts the live page behind the glass, so text, video and controls behind it keep working; the lensed, color-split edge is an SVG filter that renders in Chromium, and Safari and Firefox keep the frost. With backdrop, WebGL2 refracts that one image or video in every engine that has WebGL2.
• Legibility. Content takes --ran-glass-ink. Keep long text on a solid inner surface rather than relying on the glass for contrast.
• Reduced transparency. Under the OS "reduce transparency" or "increase contrast" setting (prefers-reduced-transparency: reduce) the glass becomes a solid, theme-aware surface (--ran-color-bg-elevated), without frost, refraction or highlights.
• Motion. The surface only transitions transform, so a theme switch lands in one frame. Sheen and press respect prefers-reduced-motion.
• Cost. The SVG lens map is rebuilt when the pane's size, radius or bevel changes. The WebGL refraction checks the pane and the image once a frame while visible and draws only when one of them moved.

Playground

thin

regular

thick

clear

<r-glass>

interactiverim