glass-dark-ui

Glass Dark UI Skill

使用する場面

• ダークインターフェースに、すりガラスのパネル、ぼかしシェル、グラデーション／グローの境界線が必要な場合。
• ダークなガラス面の実装（トークン、backdrop-filter のレシピ、マスク付きグラデーション境界線、コントラストの下限）が必要な場合。

ダーク系スキルの選び方： ガラス面の具体的な CSS には、こちらを使用します。ページ全体の方向性（レイアウトシェル、構造的なモチーフ、アクセントのルール）が必要な場合は、visual-style-presets（dark-glass-workspace プリセット）を使用します。ぼかしではなくフレームやレールで個性を出したい場合は、visual-style-presets（dark-technical-framed）を使用します。背景そのものがアニメーションするメッシュフィールドの場合は、mesh-gradient-dark-blue-clean を使用します。

ワークフロー

1. 環境（HTML/CSS、Tailwind、または React）と対象の面（hero、dashboard、modal、card）を確認します。
2. まずダーク UI のトークン（背景、ガラスの塗り、境界線のグロー、主要テキスト、控えめなテキスト）を定義します。
3. backdrop-filter、透明なダークカラーの塗り、控えめな内側のハイライトを使って、すりガラスのパネルを作成します。
4. 主要な面に、マスク付きグラデーション境界線（.border-gradient::before）を適用します。
5. 控えめな奥行き（シャドウ＋グロー）と、明確なホバー／フォーカス状態を追加します。
6. 仕上げる前に、コントラストとモバイルでの挙動を検証します。

基本トークン

これらをデフォルトとして使用し、ブランドに合わせて調整します。

:root {
  --bg-0: #020617;
  --bg-1: #0b1220;
  --glass-fill: rgba(15, 23, 42, 0.45);
  --glass-fill-strong: rgba(15, 23, 42, 0.62);
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #60a5fa;
}

ガラスパネルのパターン

.glass-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  background-color: var(--glass-fill);
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

境界線のグラデーションパターン

.border-gradient {
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: linear-gradient(
    145deg,
    rgba(148, 163, 184, 0.28) 0%,
    rgba(96, 165, 250, 0.36) 45%,
    rgba(168, 85, 247, 0.3) 70%,
    rgba(148, 163, 184, 0.18) 100%
  );
  pointer-events: none;
}

Tailwind の使用パターン

<section class="relative rounded-3xl border-gradient bg-slate-950/45 backdrop-blur-xl p-8 shadow-[0_20px_48px_rgba(2,6,23,0.45),inset_0_1px_0_rgba(255,255,255,0.12)]">
  <h2 class="text-slate-100 text-2xl font-semibold">Frosted Panel</h2>
  <p class="text-slate-400 mt-2">Dark glass card with masked gradient border.</p>
</section>

ダークモードのチェックリスト

• ダークなガラス面では、本文テキストを少なくとも #cbd5e1 にします。
• ぼかしの上に純粋な黒のオーバーレイを重ねるのは避け、代わりに濃いネイビー／チャコールのアルファ値を使用します。
• 読みやすさを保つため、グローの半径と強度を抑えます。
• フォーカスリングが見えるようにします（outline または明るい境界線の状態）。
• ぼかしに対応しない環境向けのフォールバックとして、より不透明な単色の背景（--glass-fill-strong）を追加します。

このスキルで対応する一般的なリクエスト

• 「光る境界線のカードを備えた、ダークなガラス調のヒーローセクションを作成する。」
• 「コントラストを損なわずに、この明るい UI をダークなガラスモーフィズムに変換する。」
• 「すりガラスのナビゲーションバー／カード／モーダルに、境界線のグラデーショングローを追加する。」
• 「ガラスパネルと控えめな奥行きで、ダッシュボードに高級感を出す。」