N2
NanToo
AD
デザイン・Web制作

ボックスシャドウ生成ツール

CSSのbox-shadowをGUIで作成。多重シャドウ・inset対応。Material Design・Neumorphismなど13種のプリセット付き。CSSコードをワンクリックコピー。

プレビュー

形状

シャドウレイヤー

X オフセット0px
Y オフセット4px
ぼかし6px
拡散-1px
不透明度15%

プリセット

CSS

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.15);

Tailwind CSS

shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.15)]
AD

ボックスシャドウ生成ツールについて

CSS box-shadowの基礎

CSSのbox-shadowプロパティは、HTML要素にドロップシャドウや内側シャドウを追加するためのプロパティです。以下の値を指定します。

  • offset-x / offset-y:シャドウの水平・垂直方向のオフセット。正の値で右下に移動し、負の値で左上に移動します。
  • blur-radius:ぼかしの半径。値が大きいほどシャドウが広がり、ぼやけます。0pxだと鮮明な影になります。
  • spread-radius:シャドウの拡張サイズ。正の値でシャドウが広がり、負の値で収縮します。
  • color:シャドウの色。rgba()を使えば透明度も指定可能です。
  • inset(任意):このキーワードを付けると、外側ではなく内側にシャドウが描画されます。

例: box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);

複数シャドウレイヤーのテクニック

box-shadowプロパティは、カンマ区切りで複数のシャドウを指定できます。これにより、単一のシャドウでは実現できないリアルで奥行きのある影を表現できます。

  • Tailwindの影:Tailwind CSSのshadow-mdshadow-lgは実は2層のシャドウで構成されています。近くの柔らかい影と遠くの広い影を組み合わせることで自然な奥行き感を演出しています。
  • Material Designの影:Googleのマテリアルデザインでは3層のシャドウ(umbra, penumbra, ambient)を使って現実の光と影に近い表現を実現しています。
  • パフォーマンスbox-shadowはブラウザの再描画コストが高いプロパティです。アニメーションする場合はwill-change: box-shadowを検討するか、疑似要素にシャドウを適用してopacityでアニメーションする手法が推奨されます。

このツールでは最大で何層でもレイヤーを追加でき、リアルタイムでプレビューしながら微調整できます。

ニューモーフィズムデザイン

ニューモーフィズム(Neumorphism)は、2020年頃から注目されたUIデザインのトレンドで、スキューモーフィズムとフラットデザインを融合させたスタイルです。

  • 原理:背景と同色の要素に、明るい影(光源側)と暗い影(反対側)を付けることで、要素が背景から押し出されたような立体感を作ります。
  • 実装:2つのbox-shadowを使います。1つは左上方向に白っぽい影、もう1つは右下方向に暗い影です。例: box-shadow: 6px 6px 12px rgba(0,0,0,0.15), -6px -6px 12px rgba(255,255,255,0.5);
  • 注意点:コントラストが弱くなりがちなため、アクセシビリティ面での配慮が必要です。特にボタンやインタラクティブ要素では、状態の区別がつきにくくならないよう注意しましょう。

このツールのプリセットから「Neumorphism」を選択すると、ニューモーフィズムスタイルの基本設定がすぐに適用されます。

よくある質問

Q. box-shadowとdrop-shadowの違いは何ですか?
box-shadowはボックスの矩形に対して影を付けるプロパティで、insetや複数レイヤー、spreadなど豊富な機能があります。一方、filter: drop-shadow()は要素の実際のシルエット(透過PNG画像の形状など)に沿った影を付けます。ただしdrop-shadowにはinsetやspreadの指定はできません。矩形のカードやボタンにはbox-shadow、不規則な形状の画像にはdrop-shadowを使い分けるのが一般的です。
Q. box-shadowのパフォーマンスへの影響はありますか?
box-shadowはブラウザの再描画(repaint)を引き起こすプロパティのため、特にアニメーションで使用する場合にパフォーマンスに影響があります。ぼかし半径が大きいほど描画コストが高くなります。対策として、擬似要素(::after)にシャドウを付けてopacityでアニメーションさせるテクニックや、will-changeプロパティの活用が推奨されます。
Q. Tailwind CSSでbox-shadowを指定する方法は?
Tailwind CSSでは shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl などのユーティリティクラスが用意されています。カスタム値が必要な場合は shadow-[0px_4px_6px_rgba(0,0,0,0.1)] のような任意値構文(arbitrary value)を使用できます。このツールではカスタムシャドウに対応するTailwindの任意値クラスを自動生成します。
Q. ニューモーフィズムの影を作るにはどうすればよいですか?
ニューモーフィズムには2つのbox-shadowレイヤーが必要です。1つ目は右下方向の暗い影(例: 6px 6px 12px rgba(0,0,0,0.15))、2つ目は左上方向の明るい影(例: -6px -6px 12px rgba(255,255,255,0.5))です。背景と要素の色を同じにし、背景が明るめのグレーだと効果が分かりやすくなります。このツールの「Neumorphism」プリセットを使えばワンクリックで設定できます。

出典・参考文献

関連ツール

このツールを評価
(0件)