CSSボックスシャドウ生成ツール
スライダーを動かし、カード上で結果を見ながらbox-shadowを作成できます。最大6つのレイヤーを重ねてやわらかくリアルな影にしたり、insetで押し込んだ効果を作ったり、ソフト、フローティング、グロー、ニューモーフィズムなどのプリセットから始めたりできます。CSSはワンクリックでコピーできます。
px
シャドウのレイヤーpx
px
px
px
%
プリセット 使い方
- プリセットを選ぶか、影のオフセット、ぼかし、広がり、色、不透明度を調整します。
- +でレイヤーを追加し、編集したいレイヤーを選択します。デザインに合わせて、背景、ボックスの色、角の丸みも変更できます。
- CSSをコピーして、要素のルールに貼り付けます。
よくある質問
ぼかしと広がりは何をするものですか？
ぼかしは影の輪郭をやわらかくします。0にすると輪郭がはっきりします。広がりは、ぼかす前に影をあらゆる方向へ大きくします。負の値にすると小さくなり、大きくぼかした影を要素の下に収めるのに役立ちます。
なぜ影を複数のレイヤーで重ねるのですか？
現実の影は、物体の近くでは濃く、離れるほど薄くなります。小さくシャープな影と、大きくやわらかい影を組み合わせると、これに近づき、1つの影よりも自然に見えます。リストの先頭のレイヤーが一番上に描画されます。
box-shadowはページを重くしますか？
通常の使い方であれば問題ありません。多くの要素に非常に大きなぼかしを使ったり、影そのものをアニメーションさせたりすると、低速なスマートフォンでは負荷になることがあります。アニメーションさせたい場合は、影を付けた疑似要素の不透明度を変更してください。
🏷️ メタタグ生成ツール
🖼️ OGP生成ツール（Open Graph）
🔗 UTMリンク作成ツール
🌈 CSSグラデーション生成ツール