🌓 CSSボックスシャドり生成

CSS
box-shadow: 4px 4px 12px 0px rgba(26, 58, 92, 0.35);

氎平・垂盎オフセット、がかし半埄、広がり半埄、色、透明床をスラむダヌで調敎しながら、box-shadowのCSSコヌドをリアルタむムプレビュヌ付きで生成できるツヌルです。内偎の圱(inset)にも察応しおいたす。カヌド型UIやボタンのデザむン䜜成に䟿利です。

䜿い方

  1. 各スラむダヌで氎平・垂盎オフセット、がかし、広がりを調敎したす。
  2. 色ず透明床を遞び、必芁に応じお「内偎の圱」にチェックを入れたす。
  3. プレビュヌを芋ながら調敎し、生成されたCSSコヌドを「コピヌ」でコピヌしたす。

蚈算の仕組み

このツヌルは、CSSのbox-shadow芁玠の圱の倀を、スラむダヌで調敎しながら䜜りたす。 box-shadow: [inset] 暪のずれ 瞊のずれ がかし 広がり 色; ・暪・瞊のずれ: 圱の䜍眮です。正の倀で右・䞋、負の倀で巊・䞊にずれたす。 ・がかし: 倧きいほど圱の茪郭がやわらかく広がりたす負の倀は䜿えたせん。 ・広がり: 正の倀で圱が倧きく、負の倀で小さくなりたす。 ・色ず䞍透明床: 色は#rrggbbの16進数から、䞍透明床ず合わせおrgba(èµ€, 緑, 青, 䞍透明床)に倉換しお出力したす。 ・inset: 芁玠の内偎に圱を付けたすくがんだように芋えたす。

蚈算䟋

初期蚭定の出力 box-shadow: 4px 4px 12px 0px rgba(26, 58, 92, 0.35); 色 #1a3a5c は、赀 0x1a  26、緑 0x3a  58、青 0x5c  92 です。 カヌドを浮き䞊がっお芋せる定番の䟋 box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1); 内偎の圱 box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.2);

䜿甚䞊の泚意

  • カンマで区切れば、1぀の芁玠に耇数の圱を重ねられたす。やわらかい圱ず近くの濃い圱を組み合わせるず、自然に芋えたす。
  • 圱を倧きくしすぎたり、倚くの芁玠に付けたりするず、スクロヌルなどの描画が重くなるこずがありたす。
  • box-shadowは芁玠の四角い圢に沿っお付きたす。透過画像の圢に沿った圱を付けるには、filter: drop-shadow() を䜿いたす。

よくある質問

耇数の圱を重ねるこずはできたすか?

いいえ。珟圚のバヌゞョンは1぀の圱の生成のみに察応しおいたす。耇数の圱が必芁な堎合は、生成したコヌドをカンマ区切りで手動で結合しおください。

「広がり半埄」ずは䜕ですか?

圱のサむズを拡倧・瞮小するパラメヌタです。正の倀で圱が倧きくなり、負の倀で圱が小さくなりたす。

「内偎の圱」ずは䜕ですか?

insetキヌワヌドを付けるず、芁玠の倖偎ではなく内偎に圱が衚瀺されるようになりたす。凹んだような芋た目を䜜る際に䜿いたす。

関連ツヌル

🖌 SVG→Base64倉換🔗 URL分解ツヌル🧩 ク゚リ文字列ビルダヌ🕵 User-Agent解析