カテゴリー: 開発ツール
CSS ボックスシャドウ生成ツール
box-shadow を作って CSS をコピー
ずれ・ぼかし・広がり・色・不透明度を調整し、プレビューを見ながら、貼り付けるだけの box-shadow 宣言をコピーできます。描画はすべてご自身のブラウザが行います。
出力
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
box-shadow は 5 つの値を決まった順に取り、どれを少し変えても画面上の印象が大きく変わるため、見ずに書くのは面倒です。このツールはスライダーを動かすたびに、実際の宣言をプレビュー用のボックスに描画します。より狭い 2 枚目の接地レイヤーも追加でき、これはデザイナーが要素を「ぼやけている」ではなく「浮いている」ように見せるために使う組み合わせです。内側の影に切り替えれば、押し込まれた面の表現になります。
使い方
- 水平・垂直方向のずれ、ぼかし、広がりを調整します。
- 色と不透明度を選び、必要なら内側の影や接地レイヤーを有効にします。
- box-shadow の宣言をスタイルシートにコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- 何かアップロードされますか。
- いいえ。プレビューはブラウザが描く CSS の影で、宣言はページ内で組み立てられます。
- 広がり (spread) は何をしますか。
- 広がりは、ぼかす前の影を拡大または縮小します。負の値にすると影が内側に引き込まれ、柔らかい影が要素の左右にはみ出すのを防げます。
- なぜ 2 枚重ねるのですか。
- 広くて柔らかい影だけだと霧のように見えがちです。要素の近くに小さく濃いレイヤーを重ねると接地感が生まれ、2 枚合わせて初めて高さとして読み取れます。