はじめに
画像やUIパーツに「ぼかし」「白黒」「明るさ調整」などを加えたいとき、CSSのfilterプロパティを使うと、Photoshopのような画像加工をブラウザ上で手軽に実現できます。
この記事では、CSSフィルターの基本と活用例、よくあるTipsを紹介します。
フィルター(filter)とは
filterは、要素の見た目を“リアルタイムで加工”できるCSSプロパティです。
画像はもちろん、テキストやdivなど、ほぼどんな要素にも使えます。
主な効果一覧
| フィルター名 | 効果 | 例 |
|---|---|---|
blur(px) |
ぼかす | blur(4px) |
grayscale(%) |
モノクロ化 | grayscale(100%) |
brightness(数値) |
明るさ調整 | brightness(1.3) |
contrast(数値) |
コントラスト調整 | contrast(2) |
sepia(%) |
セピア色 | sepia(100%) |
hue-rotate(deg) |
色相を回転 | hue-rotate(90deg) |
invert(%) |
色を反転 | invert(100%) |
opacity(%) |
透明度調整 | opacity(80%) |
drop-shadow() |
影を付ける | drop-shadow(4px 4px 10px #000) |
複数の効果をスペース区切りで組み合わせて使うこともできます。
使いどころ
-
アイキャッチ画像の加工
サムネイルをモノクロやセピア調にして統一感アップ。ホバー時にカラーへ戻す演出も簡単。 -
ぼかし背景の作成
ヘッダーやカードの背景だけをblur()でぼかし、ガラスモーフィズム風のデザインに。 -
ボタン・アイコンの色替え
サイトのテーマカラーに合わせてhue-rotate()やbrightness()でカラーバリエーションを増やす。 -
アクセシビリティ向上
コントラストや明度をfilterで調整し、読みやすい表示に。 -
画像の“禁止”表現
投稿NG時にgrayscale(100%)やopacity(40%)でグレーアウトなど。
使い方
1. 画像をモノクロ＋ホバーでカラーに戻す
index.html
<img src="sample.jpg" alt="サンプル画像" class="mono-hover" />
style.css
.mono-hover {
filter: grayscale(100%);
transition: filter 0.3s;
}
.mono-hover:hover {
filter: grayscale(0%);
}
通常表示ではモノクロになっています。
hoverすると色が戻り、ライトアップされたような印象になりました。
サムネイルに多用される定番テクニックです。
2. 背景をぼかす（グラスモーフィズム風）
index.html
<div class="glass-card">
<p>ガラス風カード</p>
</div>
style.css
body {
background-image: url(hero.jpg);
padding: 0 10vw;
}
.glass-card {
margin-top: 20rem;
width: 10rem;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(12px);
border-radius: 1rem;
padding: 2rem;
color: #222;
/* Safari対策 */
-webkit-backdrop-filter: blur(12px);
}
背景をぼかすことができました。
まとめ
-
filter:その要素“全体”を加工（画像にもテキストにもdivにもOK） -
backdrop-filter:その要素“の背後”だけを加工（要素の中身はそのまま）
Tips
| Tip | 解説 |
|---|---|
| アニメーションに最適 |
filterはGPU処理なのでtransitionやanimationで滑らかな効果が得られる。 |
| 複数効果の順序 | 複数のfilterを並べるときは順番で結果が変わる。意図した順に指定しよう。 |
| テキストにも使える |
filter: blur(2px)やcontrast(2)はテキストにも適用可能。使いすぎに注意。 |
| SVGや画像以外にも |
div, button, img, svgなど多くの要素で使える。 |
| 対応ブラウザ | IEでは未サポート。モダンブラウザではほぼ対応済み。 |
| backdrop-filterとの違い |
filterは要素自体、backdrop-filterは“背景”の見た目を加工。組み合わせて使うと効果的。 |
最後に
CSSのfilterを使うと、画像編集ソフトがなくても表現の幅が大きく広がります。
ぼかしや色調変更など、サイトの世界観やUIの質を上げる工夫として、ぜひ一度試してみてください。