CSS box-shadow 生成

CSS box-shadow 生成ツールとは

本ツールは、CSS の box-shadow プロパティを GUI で組み立てて、そのまま貼り付けて使える CSS コードを生成する無料オンラインツールです。 スライダーで X / Y / ぼかし / 広がり / 透明度を調整しながら、 プレビューで結果を確認できます。複数レイヤーの重ね合わせや内側影 (inset) にも対応。

Material Design の Elevation や Neumorphism（凹凸表現）など、定番レシピを 12 種類のプリセットとして用意しているので、 ベースを選んで微調整するだけでデザインに合うシャドウを作れます。

box-shadow の構文

CSS の box-shadow は次の順で値を並べます:

box-shadow: <inset?> <X> <Y> <blur> <spread> <color>;

• X 軸オフセット — 正で右、負で左に影を移動
• Y 軸オフセット — 正で下、負で上に影を移動
• blur（ぼかし半径） — 大きくするほど影が柔らかくなる
• spread（広がり） — 影の輪郭を拡大/縮小（負で内向き）
• color — 影の色。rgba() で透明度を指定するのが一般的
• inset — 先頭に書くと内側影（凹みのような効果）

複数シャドウの重ね方

box-shadow はカンマ区切りで複数の影を重ねられます。 最初に書いた影が手前、後の影が奥に描画されます:

box-shadow:
  0 2px 4px rgba(0,0,0,0.2),
  0 4px 5px rgba(0,0,0,0.14),
  0 1px 10px rgba(0,0,0,0.12);

Material Design の Elevation はこの「複数の影を重ねて自然な深度を表現する」 手法を使っています。Elevation 1（軽く浮く）から Elevation 24（強い浮き）まで段階があり、 本ツールの Material 1 / Material 4 プリセットで体感できます。

Neumorphism（ニューモーフィズム）

Neumorphism は光源を一方向に固定し、明るい影と暗い影を 反対方向に配置することで「同じ素材の凹凸」のように見せる手法です。

• 左上に明るい影（光が当たる側）
• 右下に暗い影（影になる側）
• 背景色とボックス色を近い色味で揃えると効果が際立つ

本ツールの Neumorph プリセットは#A3B1C6（淡いグレー青）の背景に最適化されています。 他の背景色では値の調整が必要です。

パフォーマンスの注意

• 大きな blur や spread はブラウザのペイントコストが高い。 スクロール中や大量の要素に適用すると 60 fps を維持しにくい
• GPU 合成を活かすには will-change: box-shadow やtransform: translateZ(0) でレイヤー化するのも一手。ただし常用は禁物でメモリを消費する
• 複数レイヤーを重ねる場合は、最終的な見た目を 1 枚のシャドウで近似できないか検討する

アクセシビリティ

影だけで状態（押下・選択・無効など）を伝えると、 色覚特性のあるユーザや高コントラストモードのユーザには伝わりません。 必ずテキスト・アイコン・ボーダーなどの併用で意味を補強してください。

使い方の流れ

1. 用途に近いプリセットをクリック
2. プレビューを見ながらスライダーで微調整
3. 背景色 / ボックス色を実際の使用環境に合わせる
4. 必要に応じてレイヤーを追加（Material 系は 3 レイヤー重ねる慣習）
5. 「コピー」ボタンで CSS を取得し、プロジェクトに貼り付け

プライバシー

操作内容はすべてブラウザ内で処理され、弊社サーバには送信しません。