ボックスシャドウジェネレーター

仕組み

各シャドウレイヤーは、水平・垂直オフセット、ぼかし、広がり、色、不透明度、「内側」フラグを持つ小さなオブジェクトです。HTMLのカラーピッカーは透明度をサポートしないため、16進数の値は赤・緑・青の成分に分解され、不透明度スライダーと組み合わされてrgba()の色になります。すべてのレイヤーはカンマで区切られて1つのbox-shadow宣言にまとめられ、同じ文字列がプレビュー要素に適用されるため、見えているものがそのままコピーされます。順序は重要です。リストの最初のシャドウが他の上に描画されます。

シャドウが1つだけだと、ほぼ常に不自然に見えます。本物のシャドウはタイトで濃いコアと、柔らかく広いフェードを持っており、0 4px 12px rgba(0,0,0,0.25)のような単一の値では両方を実現できません。よく練られたどのデザインシステムでも使われる手法は、低い不透明度の2〜3個のシャドウを重ねることです。10%のタイトな0 1px 2pxと、8%の広い0 8px 24pxのように。それぞれ単体ではほとんど気づかれませんが、組み合わせると本物の奥行き感が生まれます。

すべてこのページのJavaScript内で動作します。選んだ色や生成されたCSSはどこにも送信されません。作業中に開発者ツールのネットワークタブで確認できます。