6XC

CSS Box Shadow(ボックスシャドウ)ジェネレーター

オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。

810回閲覧

box-shadowプロパティとは

構文はbox-shadow: x y ぼかし 広がり 色です。オフセットは影の位置をずらし、ぼかしは輪郭を柔らかくし、広がりは影を拡大・縮小します。色には通常アルファ値(例:rgba(0,0,0,0.15))を付けてリアルに仕上げます。insetを加えると影がボックスの内側に描かれます。x を0、y を小さめにし、不透明度を低くした柔らかい影がもっとも自然に見えます。

よくある質問

ぼかしと広がりの違いは何ですか?

ぼかしはサイズを変えずに影の輪郭を柔らかくします。広がりはぼかしを適用する前に、影を全方向に拡大(負の値なら縮小)します。

エレガントでモダンな影の作り方は?

xを0、yを小さめ(2〜8px)、ぼかしを大きめ(10〜30px)、不透明度を低め(0.08〜0.2)にします。狭い影と広い影を2枚重ねると奥行きが出ます。

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる CSS Border(枠線)ジェネレーター 太さ・スタイル(solid、dashed、dotted、double…)・色・角丸をビジュアルに調整し、ライブプレビューで枠線をデザインします。 使ってみる