CSS filterプロパティの使い方 — blur・brightness・grayscaleなど9種類
CSS filterプロパティは画像・要素にPhotoshopのような視覚効果をCSSだけで適用できます。ホバーエフェクト・暗いテーマのオーバーレイ・画像の加工など、JavaScriptなしで実現できる表現の幅が広がります。
9種類のフィルターとその効果
blur（ぼかし）・brightness（明るさ）・contrast（コントラスト）・grayscale（グレースケール）・hue-rotate（色相回転）・invert（色反転）・opacity（透明度）・saturate（彩度）・sepia（セピア）の9種類があります。複数を組み合わせて filter: brightness(1.2) contrast(1.1) saturate(1.3) のように書くことでInstagramフィルターのような効果も作れます。
ホバーエフェクトへの応用
カードや画像のホバー時にfilter: brightness(1.1) をtransitionと組み合わせて使うと、軽くハイライトするエフェクトが作れます。グレースケールの画像をホバーでカラーに変える演出はfilter: grayscale(1) → grayscale(0) のトランジションで実現できます。
backdrop-filterとの違い
CSSにはbackdrop-filterもあり、こちらは要素の背景（背後にある要素）にフィルターを適用します。すりガラス（Glassmorphism）効果はbackdrop-filter: blur(12px) saturate(180%) で実現できます。filterは要素自体に、backdrop-filterは背後に対して作用する点が異なります。
filter: drop-shadowとbox-shadowの違い
drop-shadowフィルターは要素の輪郭（透過部分を除く形状）に沿って影を付けます。PNGの透過アイコンに使うとアイコンの形に沿った自然な影が出ます。box-shadowはボックス全体の矩形に影が付くため透過アイコンには向きません。CSS Filter Generatorでdrop-shadowも含めた各フィルターをリアルタイム確認できます。