CSS で円をぼかして作るグラデーション
はじめに
Instagram で面白いグラデーションの作り方を見つけました。この作り方によるグラデーションは、2021 年に入りよく見かけます。
一般的に CSS でグラデーションを作るには、linear-gradient()・radial-gradient()・conic-gradient() を使用します。しかし、上記 Instagram のグラデーションは、複数の円を filter: blur() でぼかして作ります。
このぼかして作るグラデーションを可能な限り簡単に実現する CSS を考えてみました。
デモ
実際のデモをご覧ください。
デモの HTML です。今回は 4 つの円を作ります。
<div class="box">
<div class="circle a"></div>
<div class="circle b"></div>
<div class="circle c"></div>
<div class="circle d"></div>
</div>
デモの CSS です。パソコンで見てもスマホで見ても同じグラデーションになるようにしました。
.box {
--box-width: min(80vw, 400px);
aspect-ratio: 16 / 9;
background: #fff;
border-radius: 16px;
overflow: hidden;
position: relative;
width: var(--box-width);
}
.circle {
aspect-ratio: 1 / 1;
border-radius: 50%;
filter: blur(calc(var(--box-width) / 10));
position: absolute;
}
.circle.a {
background: #88077e;
left: -30%;
top: -70%;
width: 90%;
}
.circle.b {
background: #fbb835;
right: -10%;
top: -85%;
width: 80%;
}
.circle.c {
background: #fd6444;
bottom: -50%;
right: -15%;
width: 70%;
z-index: 1;
}
.circle.d {
background: #5158dd;
bottom: -80%;
left: -15%;
width: 70%;
}
解説
CSS を解説します。
まずは、ボックスを作ります。background-color は、白と明示します。特にダークモードに対応している場合は、指定が必要だと思います。
.box {
--box-width: min(80vw, 400px);
aspect-ratio: 16 / 9;
background: #fff;
border-radius: 16px;
overflow: hidden;
position: relative;
width: var(--box-width);
}
次に、ボックスの中に 4 つの円を描きます。デモでは、左上から時計順に <div> を配置しています。
.circle {
aspect-ratio: 1 / 1;
border-radius: 50%;
position: absolute;
}
.circle.a {
background: #88077e;
left: -30%;
top: -70%;
width: 90%;
}
.circle.b {
background: #fbb835;
right: -10%;
top: -85%;
width: 80%;
}
.circle.c {
background: #fd6444;
bottom: -50%;
right: -15%;
width: 70%;
z-index: 1;
}
.circle.d {
background: #5158dd;
bottom: -80%;
left: -15%;
width: 70%;
}
最後に、4 つの円に filter プロパティを指定します。値に指定するのは、blur() です。親要素であるボックスの width の値の 10 分の 1 を blur() に指定しました。
.circle {
filter: blur(calc(var(--box-width) / 10));
}
linear-gradient() や radial-gradient() の 重ね合わせ に似てはいますが、独特なグラデーションの完成です。
色の調整
先程のデモの blur() の値を blur(calc(var(--sample-width) / 5)) と 2 倍にしてみます。より円の輪郭がぼけますが、色がくすんで見えます。
「円の輪郭はぼかしたいけど、くすんだ色は嫌だ」という場合は、filter プロパティに値を追加し調整するといいかもしれません。例えば、contrast() を追加してみます。
.circle {
filter: blur(calc(var(--box-width) / 5)) contrast(2.4);
}
contrast() の指定で、どれほど変わるか比較してみます。
contrast() なしcontrast() あり最初のデモと比較してみます。
blur() の値を大きくし、contrast() も指定filter プロパティの調整で好みのグラデーションを作れます。
参考デザイン
Dribbble から参考になりそうなグラデーションを用いたデザインをいくつか集めました。グラデーションの重ね合わせでの表現が適しているデザインもあります。重ね合わせは Mesher Tool で簡単に作れます。Mesher Tool の使い方は、Mesher Tool の使い方 をご参考ください。
