🏔️

【CSS】Progressive blurの実装法〜blurの境界を美しく〜

2024/06/21に公開

こんにちは！
CSSを完全に理解したい筆者です。

ある日、「ここの文字見にくいから、背面にblurかけておいて！」と言われました。「(blurね。あのぼかしのやつね。まあ調べたらいけるやろ。)了解です！」と意気揚々と答えたものの、実際には「あれ？思ったより難しいぞ…」となりました。

この記事ではその手こずった経験をもとに、blur効果から使い方までご紹介します。

blurの効果

まずはblurの効果から説明します。
blurは要素をぼかすために使用される視覚効果です。これにより、画像やテキストなどの要素がふんわりとしたぼやけた見た目になります。例えば、背景をぼかして前景の要素を際立たせたり、スタイリッシュなデザインを作り出したりすることができます。

またblurには、Gaussian blurやProgressive blurと呼ばれるものがあります。Gaussian blurは、ぼかしの効果がどこも均一なblurです。対してProgressive blurは、ぼかしの効果が徐々に変化するような可変的なblurです。Gaussian blurとProgressive blurについては、以下記事でわかりやすく説明していたので参考にしてください。

実装してみよう!

以下のような画面を用意しました。
テキストの文字と背景の色が相まって、文字が若干見にくい気がしますね。そこでblurの登場です。文字の周りにGaussian blurとProgressive blurをそれぞれかけてみましょう。

☝️のコード

index.html

<div class="container">
  <div class="textWrapper">
    <p class="text">blurかけてみた</p>
  </div>
</div>

style.css

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-image: url(https://picsum.photos/seed/picsum/1200/600);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.textWrapper {
  padding-inline: 80px;
  padding-block: 40px;
}

.text {
  color: white;
  font-size: 40px;
  font-weight: bold;
}

Step1 Gautian Blurを実装する

対象の要素にbackdrop-filterというCSSプロパティを適用すると簡単にblurをかけることができます。backdrop-filterは、要素の背後の領域にぼかしや色変化のようなグラフィック効果を適用するスタイルです。

blurをかける対象に以下のようにCSSを適用させます。

/** pxの値が大きくなるほど、ぼかしが強くなる。 */
backdrop-filter: blur(40px);

☝️のコード

index.html

<div class="container">
  <div class="textWrapper">
    <p class="text">blurかけてみた</p>
  </div>
</div>

style.css

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-image: url(https://picsum.photos/seed/picsum/1200/600);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.textWrapper {
  padding-inline: 80px;
  padding-block: 40px;
+ backdrop-filter: blur(40px);
}

.text {
  color: white;
  font-size: 40px;
  font-weight: bold;
}

なんとbackdrop-filterを適用するだけでGaussian blurを実装することができました。(Easy!!)

ただGaussian blurだと、blurがかかっているところとかかっていないところの境界線がはっきりしすぎていて若干気になりませんか？次章でProgressive blurを実装して、この境界線をぼかしていきます。

Step2 Progressive Blurを実装する

(筆者はここで手こずりました...)
blurの境界線をぼかすには以下のようなCSSを適用します。そもそもmaskって何？というところから各プロパティについて説明します。

/** マスクレイヤーにグラデーションを指定 */
mask-image:
  linear-gradient(to top, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%),
 　　linear-gradient(to bottom, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%),
  linear-gradient(to left, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%),
  linear-gradient(to right, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%);

/** マスクの合成モードを設定 */
mask-composite: intersect;

maskについて

まずmaskについてですが、maskは指定した要素の上にマスクレイヤーというものを定義できます。マスクレイヤーは、要素の一部を隠したりグラデーションを行ったりできるような透明なフィルターのようなイメージです。

mask-imageについて

mask-imageはマスクレイヤーを作成し、要素のマスクレイヤーとして使用する画像を設定できます。そして今回はmask-imageに設定する画像の一つとして、以下を設定します。

linear-gradient(to top, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%)

これは対象のtopの95％から100％の位置かけて、透明度を100%から0%にグラデーションする画像を設定することになります。今回はtopの他にも、bottom・left・rightのそれぞれでマスクレイヤーを設定することで、上下左右の各辺の境界線をぼかしています。

mask-compositeについて

ここまでで、top・bottom・left・rightの計４つのマスクレイヤーを定義しました。最後にこの４つのマスクレイヤーを合成させる必要があります。mask-compositeは、これらの計4つのマスクレイヤーを合成して一つのmask効果を出すようにするプロパティになります。

完成系

上記のCSSを適用させると以下のようになりました。

☝️のコード

index.html

<div class="container">
  <div class="textWrapper">
    <p class="text">blurかけてみた</p>
  </div>
</div>

style.css

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-image: url(https://picsum.photos/seed/picsum/1200/600);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.textWrapper {
  padding-inline: 80px;
  padding-block: 40px;
  backdrop-filter: blur(40px);
+ mask-image:
+   linear-gradient(to top, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%),
+　  　linear-gradient(to bottom, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%),
+   linear-gradient(to left, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%),
+   linear-gradient(to right, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%);
+ mask-composite: intersect;
}

.text {
  color: white;
  font-size: 40px;
  font-weight: bold;
}

これでProgressive blurを実装することができました。

今回紹介したmask-imageやmask-composite以外にもmaskに関連するプロパティは存在し、色々な場面でも使うことができそうです！

最後に

blur効果の基本的な使い方や、Progressive blurのように境界線をぼかすテクニックを学ぶことができました。

これからもCSSの様々なプロパティや効果を探求して、自分のデザインに取り入れたいと思います！最後まで読んでいただきありがとうございました！

Gemcook Tech Blog

「好きな人を喜ばせるプロダクトを作る」をMissionに日々開発しています。モバイル/Webアプリの企画・UI/UX設計・開発・運用までサポート。TypeScript、React、React Native、Next.js、Go、Hono、AWS、Cloudflare、TiDB、Bun ← この辺が好きな会社です🐿️

blurの効果

実装してみよう!

Step1 Gautian Blurを実装する

Step2 Progressive Blurを実装する

maskについて

mask-imageについて

mask-compositeについて

完成系

最後に

Discussion