CSSのみでテキストや画像にぼかし効果を付ける

この記事は【2022年7月6日】が最後の更新のため、記事の内容が古い可能性があります。

テキストや画像にぼかし（ブラー）効果をつけたい時に、画像加工をしなくてもCSSのfilterプロパティを利用して同様の効果を表現することができます。

<div class="sample">
ここにぼかし効果を付けたい要素を記述
</div>

.sample{
   filter: blur(5px);
}

実際に効果を適用してみます。
どの様に変化するのかご確認ください。

filter: blur適用前
ブラー効果サンプル

filter: blur(5px)適用後

ぼかしの効果は、pxの単位で指定できます。
単位によってどれくらい効果が変わるのか実際に見てみましょう。

filter: blur(1px)

filter: blur(10px)

filterプロパティは、ぼかしの他に明度やコントラストなど10種類用意されています。
後ほど他の効果についてもご紹介します。

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本　Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。

応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。

■BTC
1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ
■MATIC
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B
■ETH
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B