【CSS】グラデーションのドロップシャドウを作成する

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSを使って、グラデーションのドロップシャドウの作成方法をご紹介しています。要素にグラデーションの影を表示したい場合に有効な方法です。

では、解説してきます。

box-shadowでグラデーションの影は表現できない

要素にドロップシャドウを付けたい場合はbox-shadowを使用しますが、box-shadowではグラデーションの影を表現することはできません。なぜならbox-shadowに指定することができるのは<color>のデータ型ですが、グラデーションは<gradient>というデータ型で分類では<image>のデータ型になるからです。そのためグラデーションのドロップシャドウを付けたい場合はbox-shadow以外の方法を検討する必要があります。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

擬似要素にグラデーションの背景を付けて使用する

グラデーションのドロップシャドウのスタイルを作る場合、擬似要素を使用する方法がポピュラーです。擬似要素にグラデーションの背景を設定し、filterのblurでぼかしたものを要素と重ねてドロップシャドウ風の見た目に整えます。

下記は擬似要素で作成したものではないですが、左が要素、右が擬似要素と仮定して、二つの要素を重ねることでドロップシャドウを再現することができます。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

完成イメージが掴めたと思いますので、上記の方法を用いてグラデーションのドロップシャドウを作成したいと思います。

グラデーションのドロップシャドウを作成する

前項でご紹介した内容を応用し、要素の下に擬似要素が重なるように重なり順を意識してスタイルを作成します。下記ではlinear-gradientを使用していますが、radial-gradientも使用可能です。ドロップシャドウの表示位置は擬似要素のtopとleftの値で調整ください。

HTML

<div class="box">
    <div class="box__content">
        <p>Gradient</p>
    </div>
</div>

CSS

.box {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    
    &__content {
        position: absolute;        
        z-index: 2;
        width: 100%;
        height: 100%;
        background: #ffffff;
    }
    
    //Gradient Drop Shadow
    &::before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 10px; //ドロップシャドウ：縦位置調整
        left: 10px; //ドロップシャドウ：横位置調整
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, red 0%, blue 100%);
        filter: blur(10px);
    }
}