ボックスシャドウ

カードに影を付けるCSS断片です。読みやすさの比はコントラストチェックへ。

カードUIに影を付けたい——box-shadow の断片です。デザインシステムの公式トークンでも、アクセシビリティの適合でもありません。

文字色はコントラストチェック。背景はCSSグラデーション。px と rem はCSS単位換算です。

実装で使うとき

社内管理画面のカード、LPのボタンに、値をコピーする用途です。影が濃いと、低コントラストの本文がさらに読みにくく見えます。比は別ページで測ってください。

サンプルを記事に載せるときは、フェンスします。

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

使い方

1. オフセット、ぼかし、広がり、色を動かします。
2. CSSをコピーします。
3. 本文色の比を、コントラストチェックで確認します。

システムにしないこと

テーマ生成、トークン配布、印刷のドロップシャドウ校正ではありません。