結果は情報提供のみを目的としており、誤りを含む場合があります。重要な情報は必ずご自身で確認してください。本ツールのご利用は自己責任でお願いいたします。
このツールでできること
ボックスシャドウ生成ツールは、水平オフセット、垂直オフセット、ぼかし、広がり、色、不透明度のスライダーでCSSのbox-shadowを作成します。ドラッグするとプレビューのボックスが更新され、出力された1行はそのままコピーできます。初期状態は、ボックスの10px下に落ちる、ぼかし20px、25%の黒の柔らかい影です。
4つの長さはCSSの順序、つまりXオフセット、Yオフセット、ぼかし半径、広がり半径の順で書き出されます。正のオフセットは影を右と下に、負の値は左と上に動かします。ぼかしは縁を柔らかくし、広がりはぼかしをかける前に影を拡大・縮小します。色はrgba()で書き出されるため不透明度が組み込まれ、どんな背景にも影がなじみます。
こんなときに使えます
- フラットデザインのカード、モーダル、ドロップダウンに奥行きを出すとき。
- Material Designなどのデザインシステムのエレベーションレベルに合わせるとき。
- ボタンにさりげないフォーカス効果やホバー効果を加えるとき。
- オフセットをゼロにして明るい色を使い、色付きのグロー効果を作るとき。
使用例
入力
Xオフセット0、Yオフセット10、ぼかし20、広がり0、色#000000、不透明度25%出力
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);このツールについての質問
内側の影を作るには？
値の先頭にキーワードinsetを追加します（box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);）。すると影がボックスの内側に描かれるので、押し込まれた状態のボタンや入力フィールドに適しています。
複数の影を組み合わせられますか？
はい、カンマで区切ります。リアルなエレベーションには2つの影を使うことがよくあります。縁のための小さくくっきりした影と、奥行きのための大きく柔らかい影です。たとえば0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12)のようになります。
色付きの背景の上で影が灰色っぽく濁って見えるのはなぜですか？
不透明度の低い純粋な黒は、下にある色の彩度を下げてしまいます。黒の代わりに背景色を暗くした色を使うと、すっきりした仕上がりになります。
影はページを重くしますか？
静的な影の負荷はわずかです。大きくぼかした影をアニメーションさせると、低速なデバイスではフレーム落ちが起きることがあります。代わりに、影を持たせた疑似要素のopacityをアニメーションさせてください。
このツールは無料ですか？
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか？
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。