FirstLayout

はじめに

2021 年によく見かける Web デザインがあります。それは、ぼかした円をアクセントとして用いるデザインです。

2 つのぼかした黄色の円がサイトに良いアクセントを与えています。出典:Blog Section by DStudio® on Dribbble

この円をぼかす CSS を紹介します。

デモ

実際のデモをご覧ください。

デモの HTML です。<div> が 1 つの単純なものです。

<div class="sample"></div>

デモの CSS です。ポイントは 2 つあります。1 つは、ぼかしを指定する filter: blur()。もう 1 つが、色を指定する background: radial-gradient() です。

.sample {
  --sample-color: 96, 2, 238;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgb(var(--sample-color)), rgba(var(--sample-color), 0));
  border-radius: 50%;
  filter: blur(50px);
  width: min(100%, 400px);
}

blur(50px) の数値を大きくすれば、ぼかしは強くなります。blur(100px) を試してみます。

円は radial-gradient() で色を付けており、外側が透明のグラデーションです。外側が透明なため、円の輪郭がサイト全体の背景色に溶け込みます。ただ、radial-gradient() で透明を指定する際は、現状では transparent#0000 は使えません。もし使えば、Safari で透明の部分が黒くなります。

参考 Appleデバイスでtransparentのグラデーションが黒くなる現象

また、radial-gradient() の値に <position><size> を指定し、円を調整できます。

参考 radial-gradient() - CSS: カスケーディングスタイルシート | MDN

試しに、グラデーションの中心を右にずらしてみます。

background: radial-gradient(circle at 80%, rgb(var(--sample-color)), rgba(var(--sample-color), 0));

2 つの異なる色の円を重ねれば、グラデーションのように見えます。

linear-gradient() を使う場合は?

先程の例では radial-gradient() を使い、円の背景色を指定しました。では、linear-gradient() を使い、円の背景色を指定する場合はどうすればいいでしょうか?

単純に、linear-gradient() を指定した円に filter: blur() を指定してみます。

.sample {
  aspect-ratio: 1 / 1;
  background: linear-gradient(45deg, red, blue);
  border-radius: 50%;
  filter: blur(50px);
  width: min(100%, 400px);
}

結果は、円の輪郭がにじみます。

円の輪郭をサイト全体の背景色に溶け込ませるには、円にマスクをかけます。例として、::after 疑似要素でマスクを作ってみます。

/* ダークモードに対応しているとする */
@media (prefers-color-scheme: light) {
  html {
    --bg-color: 255, 255, 255;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --bg-color: 18, 18, 18;
  }
}

body {
  background: rgb(var(--bg-color));
}

.sample {
  aspect-ratio: 1 / 1;
  background: linear-gradient(45deg, red, blue);
  border-radius: 50%;
  filter: blur(35px);
  position: relative;
  width: min(100%, 400px);
}

.sample::after {
  background: radial-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)));
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

radial-gradient() を指定した ::after 疑似要素は、中央が透明、外側は背景色と同じ色のグラデーションです。結果は、円の輪郭がサイト全体の背景色に溶け込みます。

参考デザイン

Dribbble から、ぼかした円を用いた参考デザインをいくつか集めました。

円にノイズが入っているデザインもあります。ノイズの入れ方は、最近見かける、粒子の粗いグラデーション!ほんの少しのCSSとSVGで実装できるの知ってた?をご参考ください。

出典:HVM Website by Halo UI/UX for Halo Lab on Dribbble
出典:Wallet – Hero Header v6 by Tran Mau Tri Tam ✪ for UI8 on Dribbble
出典:fintech: landing page by Vladimir Gruev for heartbeat on Dribbble
出典:Lendary Website by Halo UI/UX for Halo Lab on Dribbble
出典:Dmm_ Animation by Tran Mau Tri Tam ✪ for UI8 on Dribbble
出典:MessageMe - Landing Page by Yulia Debretseni for Arounda | UX/UI, Product Web Design & Mobile Design on Dribbble
出典:spike: homepage by Vladimir Gruev for heartbeat on Dribbble
出典:cBank landing by Valeria Rimkevich for Fireart Studio on Dribbble
出典:Web Layout by DStudio® on Dribbble
出典:Landing UI by DStudio® on Dribbble
メニュー 閉じる 検索 記事を読む Facebook Twitter はてなブックマーク Pocket LINE ダウンロード 全ての記事 Web制作 便利ツール