半透明のパネルと背景ブラー、鮮やかなグラデーション背景で奥行きを作る。ヒーロー・ダッシュボード・モバイルアプリのオーバーレイに。
向いているプロダクト: ダッシュボード、モバイルアプリのオーバーレイ、ヒーローセクション、音楽・メディア系
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「光を透かす層」。背景の色や動きが透けることで、UIが空間の中に浮かんでいるように見せる。パネルは薄く、背景は豊かに。
空間に浮かぶ、すりガラスの窓。
#6D28D9背景のグラデーション始点（紫）
#0EA5E9背景の終点（空色）
#FFFFFFパネル。white 12〜20% + blur(16px)
#FFFFFFwhite 30%の1pxボーダー（上辺は明るく）
#FFFFFF白文字。必要に応じて薄い影
#FFFFFFwhite 70%
#FFFFFFprimaryボタンは白の塗り+濃色文字
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* グラスモーフィズム（Glassmorphism）のデザイントークン — CSS辞書 /design/glass/ */
:root {
/* カラー */
--color-gradient-from: #6D28D9; /* 背景グラデーション1: 背景のグラデーション始点（紫） */
--color-gradient-to: #0EA5E9; /* 背景グラデーション2: 背景の終点（空色） */
--color-glass: #FFFFFF; /* グラス: パネル。white 12〜20% + blur(16px) */
--color-glass-border: #FFFFFF; /* グラスボーダー: white 30%の1pxボーダー（上辺は明るく） */
--color-text: #FFFFFF; /* 本文: 白文字。必要に応じて薄い影 */
--color-muted: #FFFFFF; /* 補足: white 70% */
--color-accent: #FFFFFF; /* アクセント: primaryボタンは白の塗り+濃色文字 */
/* フォント */
--font-heading: "Outfit", "Zen Kaku Gothic New", sans-serif;
--font-body: "Inter", "Noto Sans JP", sans-serif;
/* 角丸 */
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-full: 9999px;
/* 影 */
--shadow-sm: 0 4px 16px rgb(0 0 0 / 0.12);
--shadow-md: 0 8px 32px rgb(0 0 0 / 0.2);
--shadow-lg: 0 16px 48px rgb(0 0 0 / 0.28);
/* 余白の基準・線幅 */
--space-unit: 8px;
--border-width: 1px;
/* アニメーション */
--duration-fast: 150ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--easing: ease-out;
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
鮮やかなグラデーション背景+ぼかした色の玉の上に、white 12〜18%+backdrop-filter: blur(16px)+white 30%ボーダーの半透明パネルを浮かべること。文字は白で太め、コントラストを必ず確認し、backdrop-filter非対応時のフォールバックを用意する。