UI シャドウスケール生成ツール
影の要素を設定し、段階的なプレビューを確認して、UI 用の CSS トークンをコピーします。
設定を調整するとスケールが更新されます。
デザイン補助のみ：アクセシビリティや視覚品質を保証しません。実際の製品で確認してください。
使い方
使い方
- 基準色、ぼかし、拡散、不透明度、レベル数を選びます。
- 重なったプレビューと生成されたトークンを確認します。
- CSS をコピーし、実際の背景、コントラスト、状態で各レベルを確認します。
視覚設計の出発点
オフセット、ぼかし、不透明度が増える box-shadow を生成します。実際の面やコンポーネントに合わせて調整してください。
ローカルでコピー可能
計算とプレビューはこのブラウザー内で完了し、CSS カスタムプロパティとして出力されます。
デザイン補助 בלבד
このプレビューはアクセシビリティ、コントラスト、視覚品質、すべての背景への適合を保証しません。重要な状態には影以外の手がかりも用意してください。
よくある質問
あわせて知りたいこと
レベルはどう増えますか？
垂直オフセット、ぼかし、不透明度が各レベルで増えます。
影だけでアクセシビリティを保証できますか？
いいえ。影はデザイン補助です。重要な状態には文字、境界線、色なども併用してください。
入力はアップロードされますか？
いいえ。プレビューと CSS はこのブラウザーでローカル生成されます。