メインコンテンツまで移動する

CSS で円をぼかして作るグラデーション

  • 公開日

Akira Web クリエイター

はじめに

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 の使い方 をご参考ください。

4色を使ったクレジットカードのデザイン
出典:Sunflower landing page by Jeehom on Dribbble
淡い色のクレジットカードのデザイン
出典:Account transactions — banking app by Andrew Tanchuk on Dribbble
ボタンのあるカードのデザイン
出典:Weather App by HUA on Dribbble
ぼかしが強いグラデーションを用いたクレジットカードのデザイン
出典:Mobile Payments by Filip Legierski for Riotters on Dribbble
青を基調としたクレジットカードのデザイン
出典:Saveup - Web App by Barly Vallendito for Dipa: UI/UX Design on Dribbble
カラフルなクレジットカードのデザイン
出典:Wallet app by Sepide Moqadasi for Piqo Design on Dribbble

フォローする