MENU
SEO対策に強い女性向けホームページ制作ならClick Me
お問い合せ
公式ブログ

【box-shadow】コピペで使えるCSSカスタマイズ一覧「20選」｜デザインアイデア帳

デザインアイデア帳

派手すぎない、実用的に使える「box-shadow」のサンプル一覧が欲しいです…！

今回は、コピペでそのまま使える「box-shadow」デザインを【20種類】集めてみました。どれも大胆すぎず、実用的なものを多く集めてたので、ぜひそのままコピー&ペースとしてお使いください。また、女性向けのふんわりしたデザインにも使える優しい「box-shadow」を意識してみました。

目次

簡単に「box-shadow」の解説

簡単にbox-shadowがどんなものかを解説します！
こちらの解説を参考に、お好みの数値に指定してみてください＾＾

.shadow-example {
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}

水平方向のオフセット

サンプルでは、影を右方向に10ピクセルずらしています。
正の値を指定すると影が右に、負の値を指定すると影が左にずれます。

垂直方向のオフセット

サンプルでは、影を下方向に10ピクセルずらしています。
正の値を指定すると影が下に、負の値を指定すると影が上にずれます。

ぼかし半径

影のぼかし具合を指定します。
この値が大きいほど影が広がって柔らかく、0に近いほどとシャープな影になります。

色と透明度

影の色と透明度を指定します。
RGBAは赤、緑、青の色成分と透明度 (アルファ) を指定する形式です。
サンプルの場合、黒 (rgb(0, 0, 0)) に30%の透明度 (0.3) を持つ影が付きます。

カスタマイズ20選

1.Light Shadow

Soft Box Shadow Examples
Light Shadow
CSS・HTMLはこちら

軽い影で要素にさりげない立体感を加えます。

<div class="shadow-light">Light Shadow</div>
.shadow-light {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

2.Deep Shadow

Soft Box Shadow Examples
Deep Shadow
CSS・HTMLはこちら

深い影で要素にしっかりとした存在感を持たせます。

<div class="shadow-deep">Deep Shadow</div>
.shadow-deep {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

3.Gentle Shadow

Soft Box Shadow Examples
Gentle Shadow
CSS・HTMLはこちら

柔らかい影。控えめで優しい印象を与えます。

<div class="shadow-gentle">Gentle Shadow</div>
.shadow-gentle {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

4.Inset Shadow

Soft Box Shadow Examples
Inset Shadow
CSS・HTMLはこちら

内側に影が付きます。凹んだような効果を出します。

<div class="shadow-inset">Inset Shadow</div>
.shadow-inset {
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1);
}

5.Layered Shadow

Soft Box Shadow Examples
Layered Shadow
CSS・HTMLはこちら

重ねた影。複数の影を重ねて奥行きを演出します。

<div class="shadow-layered">Layered Shadow</div>
.shadow-layered {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.1);
}

6.Diffuse Shadow

Soft Box Shadow Examples
Diffuse Shadow
CSS・HTMLはこちら

拡散した影。広がりのある柔らかい影を作ります。

<div class="shadow-diffuse">Diffuse Shadow</div>
.shadow-diffuse {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

7.Subtle Shadow

Soft Box Shadow Examples
Subtle Shadow
CSS・HTMLはこちら

微妙な影。ごくわずかな立体感を加えます。

<div class="shadow-subtle">Subtle Shadow</div>
.shadow-subtle {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

8.Floating Shadow

Soft Box Shadow Examples
Floating Shadow
CSS・HTMLはこちら

浮いているような影。要素が浮かび上がって見えます。

<div class="shadow-float">Floating Shadow</div>
.shadow-float {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

9.Glow Shadow

Soft Box Shadow Examples
Glow Shadow
CSS・HTMLはこちら

グロウ効果のある影。周囲に光が広がるような印象を与えます。

<div class="shadow-glow">Glow Shadow</div>
.shadow-glow {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

10.Crisp Shadow

Soft Box Shadow Examples
Crisp Shadow
CSS・HTMLはこちら

シャープな影。はっきりとした輪郭を持たせます。

<div class="shadow-crisp">Crisp Shadow</div>
.shadow-crisp {
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
}

11.Breeze Shadow

Soft Box Shadow Examples
Breeze Shadow
CSS・HTMLはこちら

そよ風のような影。軽やかな印象を与えます。

<div class="shadow-breeze">Breeze Shadow</div>
.shadow-breeze {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

12.Misty Shadow

Soft Box Shadow Examples
Misty Shadow
CSS・HTMLはこちら

霧のような影。広がりのあるぼんやりとした影を作ります。

<div class="shadow-misty">Misty Shadow</div>
.shadow-misty {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

13.Dreamy Shadow

Soft Box Shadow Examples
Dreamy Shadow
CSS・HTMLはこちら

夢のような影。柔らかく幻想的な印象を与えます。

<div class="shadow-dreamy">Dreamy Shadow</div>
.shadow-dreamy {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

14.Delicate Shadow

Soft Box Shadow Examples
Delicate Shadow
CSS・HTMLはこちら

繊細な影。軽やかで細かい影を加えます。

<div class="shadow-delicate">Delicate Shadow</div>
.shadow-delicate {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

15.Velvety Shadow

Soft Box Shadow Examples
Velvety Shadow
CSS・HTMLはこちら

ベルベットのような影。滑らかで深みのある影を作ります。

<div class="shadow-velvety">Velvety Shadow</div>
.shadow-velvety {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

16.Muted Shadow

Soft Box Shadow Examples
Muted Shadow
CSS・HTMLはこちら

控えめな影。目立たないが存在感を持たせます。

<div class="shadow-muted">Muted Shadow</div>
.shadow-muted {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

17.Bottom Shadow

Soft Box Shadow Examples
Bottom Shadow
CSS・HTMLはこちら

下方向の影。要素が上に浮かび上がって見えます。

<div class="shadow-bottom">Bottom Shadow</div>
.shadow-velvety {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

18.Airy Shadow

Soft Box Shadow Examples
Airy Shadow
CSS・HTMLはこちら

軽やかな影。ふんわりとした印象を与えます。

<div class="shadow-airy">Airy Shadow</div>
.shadow-airy {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

19.Bottom Shadow

Soft Box Shadow Examples
Thick Shadow
CSS・HTMLはこちら

厚い影。重厚感のある影を作ります。

<div class="shadow-thick">Thick Shadow</div>
.shadow-thick {
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
}

20.Whisper Shadow

Soft Box Shadow Examples
Whisper Shadow
CSS・HTMLはこちら

ささやくような影。非常に淡い影を作ります。

<div class="shadow-whisper">Whisper Shadow</div>
.shadow-whisper {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}
デザインアイデア帳
目次