Web制作
blurを使って、ブロックの影にグラデーションを設定する

blurを使って、ブロックの影にグラデーションを設定する

2023.06.07

先日、AppleサイトでMac Proページを見ていたら、オブジェクトの背景に、グラデーションのかかった影が使われていました。

一見、CSSのbox-shadowを使っているようですが、box-shadowでは、影の全体の色を変更させることはできますが、グラデーションの設定はできなかったはず。と、サイトを調べてみると、box-shadowではなく、blurを使った影の表現になっていました。

初めて目にした使い方なので、簡単なサンプルで、どうなっているか再現してみたいと思います。

影になるブロックの作成

まず、影になるブロックを作成します。今回は、外側にコンテナー的なdivタグを設置し、その中に、影になるdivを設置します。また、コンテナーの中央に配置していますが、今回は、positionを使って上下左右の中央揃えにしています。

このような上下左右の中央配置をしたい場合、flexやgridを使うのが主流だと思いますが、今回のサンプルでは、この影になるブロック全体をぼやけされます。となると、この中に入っているコンテンツもぼやけてしまうため、今回は影になる部分と真ん中のコンテンツを分けており、そのため、positionを使った中央揃えを使っています。

.wrap{
    width: 800px;
    height: 800px;
    margin: 20px auto;
    border: 1px #000 solid;
    position: relative;
}
.back{
    background: rgb(107,240,255);
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

<div class="wrap">
<div class="back"></div>
</div>

背景色を変更し、正円にする

次に、グラデーションで背景色を設定し、border-radiusを使って正円にします。本家サイトは、ちょっとだけ楕円でしたが、特別大きな違いはありません。

.wrap{
    width: 800px;
    height: 800px;
    margin: 20px auto;
    border: 1px #000 solid;
    position: relative;
}
.back{
    background: linear-gradient(52deg, rgba(107,240,255,1) 0%,
 rgba(252,160,235,1) 50%,
 rgba(255,247,149,1) 100%);
    width: 500px;
    height: 500px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

blurを設定し、ぼかす

次に、blurをかけて、ぼかしをかけます。多分、大きめのぼかしのほうが、いい感じになると思います。

.wrap{
    width: 800px;
    height: 800px;
    margin: 20px auto;
    border: 1px #000 solid;
    position: relative;
}
.back{
    filter: blur(60px);
    background: linear-gradient(52deg, rgba(107,240,255,1) 0%,
 rgba(252,160,235,1) 50%,
 rgba(255,247,149,1) 100%);
    width: 500px;
    height: 500px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

上にdivタグを設置

そして、最後にコンテンツ的なdivタグを、上に載せます。

<div class="wrap">
<div class="back"></div>
<div class="main">ここに真ん中のオブジェクト</div>
</div>

.wrap{
    width: 800px;
    height: 800px;
    margin: 20px auto;
    border: 1px #000 solid;
    position: relative;
}
.back{
    filter: blur(60px);
    background: linear-gradient(52deg, rgba(107,240,255,1) 0%,
 rgba(252,160,235,1) 50%,
 rgba(255,247,149,1) 100%);
    width: 500px;
    height: 500px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.main{
    width: 300px;
    height: 300px;
    background-color: #000;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: grid;
    justify-content: center;
    align-items: center;
}

いずれ、box-shadowにもグラデーションを使えるようになるかもしれませんが、このblurでも同じようなことができるのは、すごく面白いと思います。