css だけで画像をぼかすなどのフィルターを実装する方法

filter: blur()

対応状況や注意点

対応ブラウザは Can I Use… から確認できます。

Can I Use… によると、ほとんどのモダンブラウザではプレフィックス無しでサポートしているようです。
一部の過去のブラウザにも対応させるために、-webkit-のプレフィックスをつけてもいいかもしれません。

実装方法

実装はいたって簡単。

HTML
<img class="blur" src="example.jpg" />

CSS
.blur{
 filter: blur(10px);
 -webkit-filter: blur(10px);
}

実装結果

画像にフィルターが適用されて、ぼかしが効いているかと思います。

ぼかす量を大きくしすぎるとモバイルでぼかしが適用されなくなる場合があるので、その場合はぼかし量を小さくしてみましょう。

filterは、画像だけでなく、文字などその他の要素にも使用可能で便利です。

ぼかし以外にも色々できる

filterはぼかし機能だけではなく、コントラストやグレースケールなど、フィルターをかけることができます。下記では複数のフィルターをかけてみます。

HTML
<img class="filter" src="example.jpg />

CSS
.filter{
 filter: contrast(3) grayscale(0.8);
}

ここでは、コントラスト・ぼかし・グレースケールのフィルターを適用してみました。

フィルタを複数組み合わせることで、わざわざフォトショップなので画像を加工せず、しかも動的にブラウザ上でフィルタをかけることができ、リッチなウェブサイト作成が可能となります。

全てのフィルターを知るには、こちらのサイトがチェクしてください。

iOS のような後ろの要素を css だけでぼかす方法

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。