デザインシステム＆Tailwindエレベーションエンジン
CSSレイヤードボックスシャドウパレット＆エレベーション生成ツール
複数の階層シャドウを重ね合わせ、滑らかな拡散、自然な環境光、アンビエントオクルージョン、Tailwindクラスを生成する開発者向け設計ツール。
100% クライアントサイド保護
W3C CSS＆DTCG準拠
プリセット:
影の物理特性＆エレベーション設定
エレベーション階層を検証全6階層を表示中
4 レイヤー
2層 (高速)4層 (バランス)6層 (極めて滑らか)
90°
0° 右方向90° 真上自然光180° 左方向270° 下方照明
40px
16px (繊細)40px (標準)80px (劇的)
1.5x
0.5x (鮮明・シャープ)1.5x (自然な拡散)3.0x (広域発光グロー)
-2px
-8px (超鮮明輪郭)-2px (モダンSaaS標準)+4px (クレイ膨張)
16%
5% (控えめ)16% (標準)50% (高コントラスト)
#0F172A
環境光・キーライト配分45%
直射キーライト強調拡散環境光グロー強調
キャンバス:
形状:
xs3px 浮上
マイクロエレベーション
繊細な境界線、バッジアクセント、テーブル行ハイライト
4 レイヤー
sm8px 浮上
静止状態
ボタン、フォーム入力、基本配置カード
4 レイヤー
md14px 浮上
インタラクティブリフト
ホバー状態、フローティングツールチップ、アクティブパネル
4 レイヤー
lg22px 浮上
フローティング要素
ドロップダウンメニュー、選択オーバーレイ、フローティングアクションボタン
4 レイヤー
xl30px 浮上
オーバーレイモーダル
ダイアログ、スライド式ドロワー、重要通知バナー
4 レイヤー
2xl40px 浮上
ヒーローフローティング
スプラッシュダイアログ、ライトボックスギャラリー、最上位モーダル
4 レイヤー
エレベーション階層
6 個別階層レベル
24 総計算マイクロレイヤー数
光源ベクトル＆ブラー
方位角: 90° • 1.5x 拡散
スプレッドオフセット -2px • 減衰指数 1.5
トークン出力仕様
Tailwind＆DTCG即時利用可能
バンディング皆無 • 100% ブラウザ内構文解析
100% クライアントサイド物理演算
光源ベクトル投影、環境光減衰、指数ブラー計算がサーバー通信なしでブラウザ内で瞬時に完結します。
バンディングを解消する多層グラデーション
従来の単層ブラー影を複数の精密階層に分解し、滑らかで自然な影の階調と光学的な輪郭を実現します。
ユニバーサルデザイントークン出力
Tailwind CSS、CSS変数、SCSSマップ、Style Dictionary JSON向けのエレベーショントークンを即座に生成します。