はじめに
簡単に画像を加工できるCSSのfilterプロパティ。
今回は、その10種の関数を、見比べられるサンプルつきでご紹介します。
先に、よく使う書き方をまとめておきますね。そのままコピーして使えます。
よく使う書き方（コピペ用）
2つ以上の関数を使うときは、半角スペースで区切って並べます。
10種類を一覧で見比べ
左上が元の写真です。それぞれのfilterをかけると、こんなふうに変わります。
それぞれの詳しい説明は、このあと順番に見ていきましょう。
filterとは
filterはCSS3より追加されたプロパティで、関数を用いて画像などの要素にぼかしや色変化といった効果をつけます。
Photoshopのグラフィック効果をCSSでやるイメージでしょうか。
関数は10種類あり、単独はもちろん組み合わせて使うこともできます。
今は、Chrome・Safari・Edge・Firefoxなど主要なブラウザのすべてで使えます。MDN（Web技術の公式リファレンス）でも「2016年9月以降、すべてのブラウザーで利用可能」とされています（2026年10月確認）。
※下の画像は、2024年に「Can I use」で対応状況を確認したときのものです。
Source: Can I use (https://caniuse.com)」
filterの関数一覧
| 関数 | 効果 |
|---|---|
| blur | ぼかし |
| brightness | 明るさ |
| contrast | コントラスト |
| drop-shadow | ドロップシャドウ・影 |
| grayscale | グレースケール |
| hue-rotate | 色相回転 |
| invert | 反転 |
| opacity | 透過度 |
| saturate | 彩度 |
| sepia | セピア |
解説用に、うどんの画像（webp）を用意しました。
こちらをマウスオーバー（:hover）したときに、各プロパティの効果を適用していきます。
filterの10個の関数を解説
blur（ぼかし）
blur関数は、画像にぼかしを適用します。
引数の初期値は0（ゼロ）。
pxやrem、emといった長さの単位で指定します。%は使えません。
CSS
filter:blur(5px);
}
結果
brightness（明るさ）
brightness関数は、画像の明るさ・暗さを調整します。
引数の初期値は1（100%）。
数値やパーセンテージで指定します。0は真っ黒になり、1（100%）を超えると明るくなります。
CSS
filter:brightness(1.5);
}
結果
contrast（コントラスト）
contrast関数は、画像のコントラストを調整します。
引数の初期値は1（100%）。
数値やパーセンテージで指定します。1（100%）未満の値ではコントラストが下がり、1（100%）を超える値ではコントラストが上がります。
0は最も低コントラストで、グレーになります。
CSS
filter:contrast(1.5);
}
結果
drop-shadow（ドロップシャドウ・影）
drop-shadow関数は、画像の輪郭にドロップシャドウ効果を適用します。
引数は、左から順番に
- 水平方向の距離(offset-x) ※必須
- 垂直方向の距離(offset-y) ※必須
- 影のぼかしの大きさ(blur-radius)
- 影の色(color)
を指定します。
- 水平方向の距離(offset-x)
- 垂直方向の距離(offset-y)
- 影のぼかしの大きさ(blur-radius)
- 影の色(color)
引数の初期値は0（ゼロ）で、影は要素の真後ろに配置されています。
pxやrem、emといった長さの単位で指定します。負の数で、影を要素の左方に配置します。
引数の初期値は0（ゼロ）で、影は要素の真後ろに配置されています。
pxやrem、emといった長さの単位で指定します。負の数で、影を要素の上方に配置します。
引数の初期値は0（ゼロ）。
pxやrem、emといった長さの単位で指定します。負の数は使えません。
16進数やrgb(a)等で指定します。指定されなかった場合は、親要素で指定しているcolorプロパティの値が使用されます。
CSS
filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.8));
}
結果
grayscale（グレースケール）
grayscale関数は、画像をグレースケールに変換します。
引数の初期値は0（ゼロ）。
数値やパーセンテージで指定します。1（100%）で完全にグレースケールになります。
CSS
filter:grayscale(1);
}
結果
hue-rotate（色相回転）
hue-rotate関数は、画像の色相環を回転させます。
引数には角度(deg)を指定します。
引数の初期値は０（ゼロ）。
最小値または最大値はなく、360deg以上を指定した場合、360で割った余りになります。
CSS
filter:hue-rotate(90deg);
}
結果
invert（反転）
invert関数は、画像の色の階調を反転させます。
引数の初期値は０（ゼロ）。
数値やパーセンテージで指定します。1（100%）で完全に反転されます。
CSS
filter:invert(1);
}
結果
invert関数については、別の記事で詳しく解説しています。併せてご覧ください。
opacity（透過度）
opacity関数は、画像に透過性を適用します。
引数の初期値は1（100%）。
数値やパーセンテージで指定します。0（ゼロ）で完全に透明（見えなくなる）になります。
CSS
filter:opacity(0.1);
}
結果
saturate（彩度）
saturate関数は、画像の彩度を上げたり下げたりします。
引数の初期値は1（100%）。
数値やパーセンテージで指定します。0（ゼロ）で完全に彩度がなくなります。1（100%）を超えると彩度が上がります。
CSS
filter:saturate(200%);
}
結果
sepia（セピア）
sepia関数は、画像をセピア調に変換します。
引数の初期値は０（ゼロ）。
数値やパーセンテージで指定します。1（100%）で完全なセピア色になります。
CSS
filter:sepia(1);
}
結果
（応用編）マウスを乗せたときだけ効果をかける
ここまでのfilterは、:hover（マウスを乗せたとき）と組み合わせると、動きのある見せ方ができます。
transitionを足すと、ふわっと切り替わりますよ。
CSS
transition:filter .4s;
}
img:hover {
filter:blur(5px);
}
結果
blurのところを、上で紹介したほかの関数に変えれば、いろいろな動きが作れます。このあと紹介する組み合わせや、最後の「白黒からカラーにする」も、この形の応用です。
（応用編）filter関数は複数を組み合わせできる
filter関数、すごいですよね。
さらにすごいのは、関数を掛け合わせられるところです。
例として、blur（ぼかし）とsepia（セピア）、contrast（コントラスト）を使ってみます。
CSS
filter:sepia(1) blur(5px);
}
img:hover {
filter:sepia(0) blur(0) contrast(1.5);
}
結果
セピア色でピンボケしていたうどんが、マウスオーバーすると色鮮やかにはっきり見えます！
書く順番で、見え方が変わることも
複数の関数を並べると、左から順番に効果がかかります。
たとえば、赤い影（drop-shadow）と白黒（grayscale）を一緒に使うと、書く順番で影の色が変わります。
CSS
img {
filter:drop-shadow(0 0 12px red) grayscale(100%);
}
/* 右：白黒にしてから影をつける */
img {
filter:grayscale(100%) drop-shadow(0 0 12px red);
}
結果
影→白黒
白黒→影
左は影まで白黒になって灰色の影に、右は赤い影が残りますね。思った見え方にならないときは、順番を入れ替えてみてください。
よく使う組み合わせ3つ
最後に、Webサイトを作るときによく使う組み合わせを3つご紹介します。
黒いアイコンを白くする
brightness(0)で一度まっ黒にしてから、invert(1)で反転させると、どんな色のアイコンも白になります。
背景が暗いところに、同じアイコン画像を白で置きたいときに便利です。透明な部分は透明のままです。
CSS
filter:brightness(0) invert(1);
}
結果
左：元のアイコン／右：filterで白に
マウスを乗せたら、白黒からカラーにする
ふだんは白黒で、マウスを乗せたときだけカラーに戻します。transitionを足すと、ふわっと切り替わりますよ。
CSS
filter:grayscale(100%);
transition:filter .4s;
}
img:hover {
filter:grayscale(0);
}
結果
写真を暗くして、上の文字を読みやすくする
写真の上に白い文字をのせると、写真によっては文字が読みにくくなります。brightnessで写真だけを少し暗くすると、文字がはっきり見えます。
CSS
filter:brightness(0.6);
}
結果
うどん豊前屋 官べえ
KAKERU TOOLS ─ 無料・登録なし
10種類の関数を、写真で見比べながら作る
白黒・セピア・色反転・ロゴを白に、などのひな形つき。スライダーで調整して、コードをコピー。色を変えた写真はPNGでも保存できます。
まとめ
filterプロパティの10種の関数についてご紹介しました。
簡単な画像加工なら、Photoshop等に頼ることなく変更できます。また、animationやtransformとかけあわせれば、可能性はさらに広がります。
画像数が減ればデータ容量軽減になりますし、マウスオーバー時のbackgroundの設定変更なども不要です。
みなさんも、いろいろ試して活用してくださいね。
マウスオーバーで画像を白黒反転させる方法は、こちらの記事でくわしくご紹介しています。
【filter】CSSでhover時に画像を白黒反転させる
もっと見せ方を広げたい人に：おすすめの本
filterに慣れてきたら、こんな本で引き出しを増やすのもおすすめです。
※このカードのリンクはアフィリエイトリンクです。リンクから購入されると、KAKERUデザインに紹介料が入ります。
一緒に悩み、一緒に考えて、伝わる形に仕上げていく。
小さなお困りごとからでも、まずはご相談ください。
「まずは話を聞いてみたい」「うちでも同じようにできる？」
そんなご相談だけでも大歓迎です。業種に合わせたご提案をいたします。
コメントを残す