zaqro toolszaqro tools

CSSシャドウジェネレーター

box-shadow、text-shadow、drop-shadow（filter）の3種類のCSSシャドウを生成。複数レイヤー対応、15種のプリセットから選択可能。

シャドウタイプ

プリセット

設定

レイヤー 1

0px
4px
6px
-1px

プレビュー

Box Shadow

生成されたCSS

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

CSSシャドウの種類

CSSには主に3種類のシャドウがあります。box-shadowはボックス要素に影を追加し、text-shadowはテキストに影を追加します。filter: drop-shadow()は 透明なPNG画像など、要素の形状に沿った影を追加できます。

box-shadowの構文

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;の形式で指定します。カンマ区切りで複数のシャドウを重ねることで、より自然な影や ネオン効果を表現できます。insetキーワードを付けると内側の影になります。

text-shadowとdrop-shadowの違い

  • text-shadow: テキスト専用。spread値は指定できません。エンボスやアウトラインなどのテキスト効果に使用します。
  • drop-shadow(filter): 要素の不透明部分の形状に沿った影を生成。PNGアイコンやSVG要素に最適です。spread値は指定できません。

パフォーマンスについて

box-shadowとtext-shadowはGPUアクセラレーションの対象外のため、 大量の要素やアニメーションに使用する場合はパフォーマンスに注意が必要です。filter: drop-shadow()はGPU処理されますが、複雑な形状では負荷が高くなる場合があります。