bêta

Glass `<mv-liquid-glass>`

Verre dépoli qui reste lisible sur n’importe quel arrière-plan : le fond est flouté, son contraste compressé, puis recouvert d’un voile aux couleurs du thème, en 5 presets pour le clair et le sombre, plus un verre liquide qui fait onduler l’arrière-plan grâce à un filtre SVG. Pur CSS, opaque en transparence réduite et en couleurs forcées.

Catégorie	Effets
Type	CSS seul (`<mv-liquid-glass>`)
Statut	bêta
Keywords	glass, glassmorphism, frosted, blur, liquid-glass, backdrop-filter, refraction, contrast, reduced-transparency

When to use

A navbar, panel or card must float over a photo, video or colorful gradient and keep its text readable
A frosted surface should follow light and dark themes without tuning blur, tint and text color by hand
A hero overlay or media pill should ripple the background like liquid glass, with a plain frosted fallback elsewhere

Avoid when

The background behind is flat, so the blur has nothing to show → use Card instead
Pointer-reactive glass, chrome or holographic materials are wanted on many elements → use Surface instead
A full-viewport backdrop needs blurring on low-end devices, where large blurs are costly

Installation

node scripts/add.mjs glass --out ./src/marvelous

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["glass"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : tokens/tokens.css, core/base.css, core/dom.js, core/element.js, components/glass/glass.css, components/glass/glass.js.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

<div style="position:relative;overflow:hidden;min-height:540px;padding:2rem 1.25rem;display:grid;gap:1.75rem;align-content:center;justify-items:center;background:radial-gradient(26rem 18rem at 10% 20%,oklch(0.74 0.18 20),transparent 70%),radial-gradient(24rem 20rem at 90% 18%,oklch(0.78 0.14 195),transparent 70%),radial-gradient(30rem 20rem at 55% 105%,oklch(0.86 0.16 88),transparent 70%),linear-gradient(135deg,oklch(0.5 0.19 290),oklch(0.38 0.14 255))">
  <!-- Hard black and white shapes behind the cards: the worst case for legibility -->
  <div aria-hidden="true" style="position:absolute;inset:0;background:repeating-linear-gradient(100deg,oklch(0 0 0 / .9) 0 38px,transparent 38px 76px,oklch(1 0 0 / .95) 76px 114px,transparent 114px 190px);mask:linear-gradient(to bottom,black 10%,transparent 62%)"></div>
  <div aria-hidden="true" style="position:absolute;left:6%;top:52%;width:9rem;height:9rem;border-radius:50%;background:oklch(0.9 0.17 95)"></div>
  <div aria-hidden="true" style="position:absolute;right:8%;bottom:8%;width:11rem;height:11rem;border-radius:2rem;rotate:16deg;background:oklch(0.6 0.23 25)"></div>

  <div style="position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1rem;width:100%;max-width:64rem">
    <article class="mv-glass" style="padding:1.25rem">
      <strong>Default</strong>
      <p style="margin:.35rem 0 0;font-size:.875rem">Follows the theme. Readable over black and white alike.</p>
    </article>
    <article class="mv-glass" data-variant="frosted" style="padding:1.25rem">
      <strong>Frosted</strong>
      <p style="margin:.35rem 0 0;font-size:.875rem">Most opaque, for paragraphs and forms.</p>
    </article>
    <article class="mv-glass" data-variant="clear" style="padding:1.25rem">
      <strong>Clear</strong>
      <p style="margin:.35rem 0 0;font-size:.875rem">A thin pane that keeps shapes crisp.</p>
    </article>
    <article class="mv-glass" data-variant="tinted" style="padding:1.25rem">
      <strong>Tinted</strong>
      <p style="margin:.35rem 0 0;font-size:.875rem">Accent glass with light text.</p>
    </article>
    <article class="mv-glass" data-variant="dark" style="padding:1.25rem">
      <strong>Dark</strong>
      <p style="margin:.35rem 0 0;font-size:.875rem">Smoked glass on any page theme.</p>
    </article>
  </div>

  <div style="position:relative;display:grid;place-items:center;width:100%">
    <p aria-hidden="true" style="grid-area:1/1;margin:0;text-align:center;font:800 clamp(4rem,12vw,8rem)/1 var(--mv-font-sans);letter-spacing:-.05em;color:oklch(0.98 0.02 90)">Glass</p>
    <mv-liquid-glass style="grid-area:1/1;display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem .75rem .75rem;--mv-liquid-glass-radius:999px;--mv-liquid-glass-distortion:70;--mv-liquid-glass-frequency:.018">
      <button type="button" aria-label="Play Autumn Light" style="display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:50%;background:var(--mv-fg);color:var(--mv-bg);cursor:pointer"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
      <span style="display:grid;line-height:1.3"><strong>Autumn Light</strong><span style="font-size:.8125rem">Nora Lindqvist · 3:42</span></span>
      <span style="margin-left:1rem;font-size:.75rem;font-weight:600;letter-spacing:.08em">LIQUID GLASS</span>
    </mv-liquid-glass>
  </div>
</div>

API

Attributes

Name	Type	Default	Description
`data-variant`	frosted \| clear \| tinted \| dark	`(theme glass)`	Preset for .mv-glass and .mv-liquid-glass; each keeps a contrast floor, and every parameter can still be overridden via its variable.
`data-transparency="reduce"`	attribute on the element or an ancestor		Forces the solid surface, as prefers-reduced-transparency does.
`data-liquid`	read-only		`<mv-liquid-glass>`: set when the ripple really renders.

Methods

Name	Description
`refresh()`	`<mv-liquid-glass>`: re-reads the filter’s CSS variables after a change.
`supportsLiquidGlass()`	JS export: true if the ripple will actually render (Chromium).

CSS classes

Name	Description
`mv-glass`	Frosted glass surface (pure CSS). ::before carries the edge sheen, ::after the grain.
`mv-liquid-glass`	Liquid glass; the `<mv-liquid-glass>` element adds the ripple (without JS or outside Chromium: the same glass, frosted).

CSS variables

Name	Default	Description
`--mv-glass-blur`	`12px`	Backdrop blur, capped at 32px for performance.
`--mv-glass-saturation`	`150%`	Backdrop saturation.
`--mv-glass-contrast`	`0.5`	Backdrop contrast squeeze (lower = safer text, flatter backdrop).
`--mv-glass-brightness`	`1`	Backdrop brightness (tinted 0.6, dark 0.75).
`--mv-glass-tint / --mv-glass-opacity`	`var(--mv-surface) / 55%`	Scrim color and opacity. Lowering the opacity below the preset lowers the contrast floor.
`--mv-glass-outline / --mv-glass-outline-color`	`1px / white 55% (12% in dark)`	Outline.
`--mv-glass-highlight`	`0.6`	Top-edge highlight and sheen intensity (0-1).
`--mv-glass-glow-size / --mv-glass-glow-color`	`0px / transparent`	Inner glow (tinted: 40px accent).
`--mv-glass-shadow`	`var(--mv-shadow-lg)`	Drop shadow.
`--mv-glass-noise`	`0.04`	Grain opacity.
`--mv-glass-radius`	`var(--mv-radius-2xl)`	Radius.
`--mv-glass-fg`	`var(--mv-fg)`	Text color (tinted: var(--mv-fg-on-accent)).
`--mv-liquid-glass-frequency`	`0.012`	Ripple noise frequency (0.001-0.05): low = large ripples.
`--mv-liquid-glass-distortion`	`48`	Displacement strength (0-200).
`--mv-liquid-glass-octaves / -seed`	`2 / 7`	Noise detail (1-4) and seed.
`--mv-liquid-glass-frost`	`3px`	Blur under the ripple (10px minimum when the ripple is off).
`--mv-liquid-glass-tint / -tint-opacity`	`var(--mv-surface) / 45%`	Scrim of the liquid glass.
`--mv-liquid-glass-inner-shadow / -shadow / -radius`	`- / var(--mv-shadow-lg) / 1.75rem`	Inner shadow, drop shadow, radius.

Accessibility

Text contrast is built in: the backdrop is squeezed into a narrow band (contrast() below 1) before the theme scrim, so the default ink stays at WCAG AA over pure black, pure white or a photo, in both themes and every preset (measured, see limits when you lower --mv-glass-opacity or --mv-glass-contrast). Without backdrop-filter the scrim rises to 92%. prefers-reduced-transparency (or data-transparency="reduce") and forced colors switch to a solid surface with system colors and a visible edge. Decorative layers are pseudo-elements or aria-hidden; no animation, no pointer effect.