Glass

<r-glass>APIスタイルトークンプレイグラウンドソース

液状のガラス面です。material を選べばガラスは完成します。背後にあるものをすりガラス状にぼかし、湾曲した縁でレンズのようにそれを曲げ、縁でわずかに色を分け、縁を照らします。個々の値は同じ名前の属性で上書きできます。コンテンツはデフォルトスロットに入れ、ガラスの上で読みやすい色が付きます。

こんなときに：色や情報の豊かなコンテンツの上にパネルを置くとき（ヒーローカード、フローティングツールバー、メディアのオーバーレイなど）。平坦な背景の上では曲げるものがないため、効果は見えなくなります。

プレイグラウンド

ガラスをドラッグし、マテリアルと背景を切り替えて、マークアップをコピーできます。スニペットにはマテリアルと異なる値だけが含まれます。

すりガラスのパネル

ドラッグまたは矢印キーで移動 · 値を調整

リセット

素材

materialregularthinthickclear

光学

blur16pxsaturate180%displace18pxbevel28pxdispersion25%

形と光

radius24pxwidth340pxspecular100%toneautodarklightrimsheeninteractive

背景

backdrop

自分の画像

コピー

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

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

マテリアル

ほとんどの用途は 4 つのマテリアルでまかなえます。既定は regular です。

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>

画像の上に置く

ガラスを <img> や <video> の上に置くときは backdrop を付けます。値がなければガラスの親要素にある最初の画像または動画を使い、セレクターを書けば別の要素を指定できます。するとガラスはその要素のピクセルを WebGL2 で読み取り、波長ごとに異なる量で屈折させます。CSS の経路で光が曲がるのは Chromium だけですが、こちらは WebGL2 を持つすべてのエンジンで動きます。画像はページに残るので、alt テキストや周囲のコンテンツは変わりません。

Refracted with WebGL2

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

クロスオリジンの画像を読み取るには crossorigin と CORS レスポンスが必要です。そうでなければ、ガラスは CSS のすりガラスのままです。

トーンとインク

tone はガラスの背後に何があるかを表します。暗い背景や色の濃い背景では縁が照らされ、コンテンツは白になります。明るい背景では白い縁が見えなくなるため、縁には陰が付き、コンテンツは暗い色になります。backdrop 画像の上では、指定しない限りトーンは覆っている領域の明るさに従います。現在のトーンは :state(light) と :state(dark) で取得でき、--ran-glass-ink でコンテンツの色を上書きできます。

The tone follows the image

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

入れ子

<r-glass> は組み合わせられます。ガラスのパネルの上にガラスのツールバーを置くように、入れ子にすれば重なったマテリアルになります。どの層も自分の背後にあるものを曲げます。

<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 リファレンス

プロパティ

屈折 displace

displace は、縁が背後にあるものを中心へどれだけ引き寄せるかを決めます。これにより縁のすぐ内側の背景が縁の上に引き伸ばされ、厚い凸状の縁が拡大するのと同じ見え方になります。bevel はその湾曲した帯の幅を決めます。bevel の半分を超えると、本物の厚いガラスの縁と同じように、縁が像を折り返します。

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 はホバー時の浮き上がりと押し込んで滑らかに戻る反応を加えます。

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

Rim — GPU によるスペキュラーエッジ（オプトイン）

rim は縁を GPU で描きます。明るい外壁と、bevel が平らな面と接する位置のかすかな内壁があり、左上からのキーライトと右下からの弱いフィルライトで照らされ、縁に沿って厚みが変わり、ときおりきらめきます。light トーンでは壁は照らされる代わりに陰になります。背景はサンプリングしません。シェーダーが知っているのはパネルのサイズ、角丸、bevel だけです。まず WebGL で描画し、ブラウザが WebGPU を持っていればバックグラウンドで移行し、どちらも使えなければ CSS のハイライトをそのまま残します。

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

CSS parts とトークン

内部は ::part(glass)、::part(specular)、::part(refraction)、rim 指定時は ::part(rim) でスタイルを当てるか、--ran-glass-* カスタムプロパティを上書きします：

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

説明

• 2 つの経路：backdrop がなければ、backdrop-filter がガラスの背後にある実際のページをすりガラス状にするので、背後のテキスト、動画、コントロールはそのまま動きます。レンズ状で色の分かれる縁は SVG フィルターで、Chromium で描画され、Safari と Firefox ではすりガラスだけが残ります。backdrop があれば、WebGL2 を持つすべてのエンジンで、その画像や動画 1 つを WebGL2 が屈折させます。
• 読みやすさ：コンテンツには --ran-glass-ink の色が付きます。長い文章はガラスにコントラストを任せず、不透明な内側の面に置いてください。
• 透明度を下げる設定：OS の「透明度を下げる」または「コントラストを上げる」設定（prefers-reduced-transparency: reduce）のもとでは、ガラスはテーマに追従する不透明な面（--ran-color-bg-elevated）になり、すりガラス、屈折、ハイライトはなくなります。
• モーション：面がトランジションするのは transform だけなので、テーマの切り替えは 1 フレームで終わります。流れる光と押し込みは prefers-reduced-motion に従います。
• コスト：SVG のレンズマップは、パネルのサイズ、角丸、bevel が変わったときに作り直されます。WebGL の屈折は表示中に 1 フレームに 1 回パネルと画像を確認し、どちらかが動いたときだけ描画します。

プレイグラウンド

thin

regular

thick

clear

<r-glass>

interactiverim