開発者 / CSS
CSS box-shadowジェネレーター
オフセット、ぼかし、拡がり、色、不透明度、inset、複数レイヤーを視覚的に調整してCSS box-shadowを作成できます。プリセットとライブプレビューで確認してから、CSSをコピーできます。
CSS box-shadowジェネレーター: 各レイヤーは、box-shadowのリスト内の1つの影になります。水平・垂直方向のオフセット、ぼかしの半径、拡がり、そして不透明度をスラッシュの後に付けたrgb()形式の色で構成されます。レイヤーは先頭のものが手前に描画されます。プレビューのボックスは、角の丸み、色、背景をデザインに合わせて変更できます。影もページ上と同じように角に沿って表示されます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
値は右方向のオフセット、下方向のオフセット、ぼかし、広がり、色の順です。厚いシャドウを1つ使うより、薄いレイヤーを複数重ねたほうが自然に見えます。後のレイヤーは前のレイヤーの下に描画されます。
プリセット
浮き上がりの表現
デザインシステムでは、シャドウを使ってページからどれだけ浮いているかを表します。静止したカードには小さく締まったシャドウを、メニューやダイアログには大きくやわらかなシャドウを使います。場所ごとに異なるシャドウを設定するのではなく、いくつかの固定レベルにそろえると、インターフェースに統一感が生まれます。
暗い背景ではシャドウがほとんど見えません。その場合は、明るいサーフェスカラーや細いボーダーで同じ役割を果たせます。ボタンやカードには、シャドウとCSSグラデーションを組み合わせてください。
シャドウとパフォーマンス
大きなぼかしは小さなぼかしより描画コストが高く、多数のシャドウ付き要素を同時にスクロールまたはアニメーションさせる場合に影響します。ホバー時にシャドウをアニメーションさせるなら、毎フレームbox-shadow自体を変更するより、不透明度を使って疑似要素に2つ目の強いシャドウを徐々に表示するほうが滑らかです。
使い方
- プリセットから始めるか、最初のレイヤーのオフセット、ぼかし、拡がり、不透明度を調整します。
- より柔らかく自然な影にするにはレイヤーを追加します。ボックスの内側に影を付ける場合はinsetにチェックを入れます。
- box-shadowの宣言をコピーします。
プライバシーと制限事項
すべての処理はブラウザ内で実行されます。最後に作成した影は、このブラウザにのみ保存されます。
関連ツール
よくある質問
box-shadowにある4つの数値は何ですか？
水平オフセット（正の値で影が右に移動）、垂直オフセット（正の値で下に移動）、ぼかしの半径（値が大きいほど柔らかくなり、負の値にはできません）、拡がり（正の値でボックスより大きく、負の値で小さくなります）です。色は最後に指定します。
自然な影にするにはどうすればよいですか？
不透明度を低くし、上から光が当たっているように影を下方向へずらします。また、2つ以上のレイヤーを組み合わせます。ボックスの近くに小さくシャープな影を置き、さらに遠くに大きく柔らかな影を置く方法です。拡がりを少し負の値にすると、大きなぼかしが側面に現れるのを抑えられます。
insetにはどのような効果がありますか？
ボックスの外側ではなく内側に影を描画します。そのため、ボックスが押し込まれたように見え、入力欄や押下状態のボタンに適しています。
画像に影が表示されないのはなぜですか？
box-shadowは画像内部の形状ではなく、要素のボックスの周囲に描画されます。透明なPNGの輪郭に影を付ける場合は、代わりにCSSのfilter drop-shadow()を使用してください。
無料ツール · ブラウザ内で · アカウント不要