カテゴリー: 開発ツール
CSS マルチレイヤー box-shadow ジェネレーター
1組のコントロールからレイヤー状の box-shadow をデザイン
オフセット、ぼかし、広がり、色、レイヤー数を設定してライブプレビューを確認し、デザイナーが実際の奥行き感を出すために重ねる方式のマルチレイヤー box-shadow 宣言をコピーできます。すべてあなた自身のブラウザで描画されます。
出力
box-shadow: 0px 4px 6px -1px rgba(23, 33, 28, 0.3), 0px 8px 12px -2px rgba(23, 33, 28, 0.26), 0px 12px 18px -2px rgba(23, 33, 28, 0.22), 0px 16px 24px -3px rgba(23, 33, 28, 0.18), 0px 20px 30px -4px rgba(23, 33, 28, 0.14);
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
単一の box-shadow レイヤーは平坦な霧のように見えがちですが、実際の立体感は、要素に近づくにつれて縮小し薄くなる複数のレイヤーを重ねることで生まれます。これは環境光が減衰する様子に似ています。このツールはオフセット、ぼかし、広がり、色の1組のコントロールとレイヤー数を受け取り、要素に近いほど引き締まり不透明度が上がるレイヤーを自動的にその数だけ導き出すので、1つずつ手で調整しなくても説得力のある重なった影が得られます。
使い方
- 生成するレイヤー数を選びます。
- ベースとなるレイヤーのオフセット、ぼかし、広がり、色、不透明度を設定します。
- 生成されたマルチレイヤー box-shadow 宣言をコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- 何かがアップロードされますか？
- されません。プレビューはあなたのブラウザが描画する CSS の影であり、宣言はページ内で組み立てられます。
- 個々のレイヤーはどのように導き出されますか？
- 各レイヤーは要素に近づくほどオフセット・ぼかし・広がりを縮小し、不透明度を上げます。これは手作業のエレベーションシステムでも使われる、縮小しながら薄くなるパターンと同じです。
- なぜレイヤー数に上限があるのですか？
- 5〜6レイヤーを超えると見た目の差はほとんどなくなる一方で CSS は増え続けるため、出力を読みやすく貼り付けやすいままにするためにコントロールに上限を設けています。