Glass

<r-glass>APIStyle-TokensSpielwieseQuellcode

Eine flüssige Glasfläche. Wähle ein material, und die Scheibe ist fertig: Sie mattiert, was dahinter liegt, bricht es an einem gekrümmten Rand wie eine Linse, trennt die Farben am Rand leicht auf und beleuchtet die Kante. Jeder einzelne Wert lässt sich mit einem gleichnamigen Attribut überschreiben. Der Inhalt kommt in den Default-Slot und erhält eine Farbe, die auf dem Glas lesbar ist.

Einsetzen, wenn eine Fläche über reichem, farbigem Inhalt liegt: eine Hero-Karte, eine schwebende Werkzeugleiste, eine Ebene über Medien. Über einem flachen Hintergrund gibt es nichts zu brechen, und der Effekt verschwindet.

Spielwiese

Zieh das Glas, wechsle Material und Hintergrund und kopiere das Markup. Der Ausschnitt enthält nur, was vom Material abweicht.

Milchglas-Panel

ziehen oder Pfeiltasten nutzen · Regler einstellen

Zurücksetzen

Material

materialregularthinthickclear

Optik

blur16pxsaturate180%displace18pxbevel28pxdispersion25%

Form und Licht

radius24pxwidth340pxspecular100%toneautodarklightrimsheeninteractive

Hintergrund

backdrop

Eigenes Bild

Kopieren

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

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

Materialien

Vier Materialien decken die meisten Fälle ab. regular ist der Standard.

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>

Über einem Bild

Füge backdrop hinzu, wenn das Glas über einem <img> oder <video> liegt. Ohne Wert nimmt es das erste Bild oder Video im Elternelement des Glases; ein Selektor benennt ein anderes. Das Glas liest dann die Pixel dieses Elements mit WebGL2 und bricht jede Wellenlänge um ihren eigenen Betrag, in jeder Engine mit WebGL2, während der CSS-Weg Licht nur in Chromium bricht. Das Bild bleibt in der Seite, sodass sein Alt-Text und der umgebende Inhalt unverändert bleiben.

Refracted with WebGL2

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

Ein Bild von einem anderen Origin braucht crossorigin und eine CORS-Antwort, um lesbar zu sein; sonst behält das Glas seine CSS-Mattierung.

Ton und Tinte

tone sagt, was hinter dem Glas liegt. Auf dunklem oder farbigem Hintergrund wird der Rand beleuchtet und der Inhalt ist weiß; auf hellem verschwindet ein weißer Rand, also wird der Rand abgedunkelt und der Inhalt dunkel. Über einem backdrop-Bild folgt der Ton der Helligkeit der verdeckten Fläche, sofern du ihn nicht setzt. Der aktive Ton steht als :state(light) und :state(dark) zur Verfügung, und --ran-glass-ink überschreibt die Inhaltsfarbe.

The tone follows the image

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

Verschachtelung

<r-glass> lässt sich kombinieren: Verschachtle eines im anderen für geschichtete Materialien, etwa eine Glas-Werkzeugleiste auf einem Glas-Panel. Jede Ebene bricht, was hinter ihr liegt.

<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-Referenz

Eigenschaften

Brechung displace

displace legt fest, wie weit der Rand das Dahinterliegende zur Mitte zieht, sodass der Hintergrund direkt innerhalb des Rands über ihn gedehnt wird, so wie ein dicker konvexer Rand vergrößert. bevel legt fest, wie breit dieses gekrümmte Band ist. Oberhalb der halben Bevel-Breite faltet der Rand das Bild auf sich selbst zurück, wie es der Rand echten dicken Glases tut.

displace = 0

displace = 40

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

Schimmer und Interaktion

sheen fügt ein wanderndes Glanzlicht hinzu; interactive fügt ein Anheben beim Hover und ein Drücken, das ohne Nachfedern zurückkehrt hinzu.

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

Rim — spekulare GPU-Kante (optional)

rim zeichnet den Rand auf der GPU: eine helle Außenwand und eine schwächere Innenwand dort, wo der Bevel auf die flache Fläche trifft, beleuchtet von einem Hauptlicht von oben links und einem schwachen Fülllicht von unten rechts, mit einer Dicke, die entlang des Rands variiert, und gelegentlichem Glitzern. Bei light-Ton werden die Wände stattdessen abgedunkelt. Den Hintergrund tastet es nie ab: Der Shader kennt nur Größe, Radius und Bevel der Fläche. Es rendert zuerst mit WebGL, wechselt im Hintergrund zu WebGPU, wenn der Browser es hat, und lässt das CSS-Glanzlicht unangetastet, wenn keins von beiden verfügbar ist.

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

CSS-Parts und Tokens

Gestalte das Innere mit ::part(glass), ::part(specular), ::part(refraction) und, wenn rim gesetzt ist, ::part(rim), oder überschreibe die Custom Properties --ran-glass-*:

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

Hinweise

• Zwei Wege. Ohne backdrop mattiert backdrop-filter die echte Seite hinter dem Glas, sodass Text, Video und Bedienelemente dahinter weiter funktionieren; der linsenförmige, farbgetrennte Rand ist ein SVG-Filter, der in Chromium rendert, Safari und Firefox behalten die Mattierung. Mit backdrop bricht WebGL2 dieses eine Bild oder Video in jeder Engine, die WebGL2 hat.
• Lesbarkeit. Der Inhalt nimmt --ran-glass-ink. Halte langen Text auf einer deckenden inneren Fläche, statt dich für den Kontrast auf das Glas zu verlassen.
• Reduzierte Transparenz. Unter der Systemeinstellung „Transparenz reduzieren“ oder „Kontrast erhöhen“ (prefers-reduced-transparency: reduce) wird das Glas zu einer deckenden, themenbewussten Fläche (--ran-color-bg-elevated), ohne Mattierung, Brechung oder Glanzlichter.
• Bewegung. Die Fläche animiert nur transform, sodass ein Themenwechsel in einem Bild erledigt ist. Schimmer und Drücken achten auf prefers-reduced-motion.
• Kosten. Die SVG-Linsenkarte wird neu erzeugt, wenn sich Größe, Radius oder Bevel der Fläche ändern. Die WebGL-Brechung prüft Fläche und Bild einmal pro Frame, solange sie sichtbar ist, und zeichnet nur, wenn sich eines davon bewegt hat.

Spielwiese

thin

regular

thick

clear

<r-glass>

interactiverim