filterプロパティは、要素に対して視覚的なエフェクト（フィルター）を適用するために使用されます。これにより、要素の見た目を変えたり、特定の効果を追加したりすることができます。動きのあるエフェクトではなく、画像などの要素にちょっとしたアレンジを加えたい時などに重宝します。

基本的な使い方

セレクタに対してfilterプロパティを追加し、フィルターの種類（関数）と強さや割合を指定します。

.u-blur{
  filter: blur(5px); //要素を5pxぼかす
}

filterの種類

filterプロパティは画像などに使用する機会が多いのですが、デザインフェーズである程度調整をしている事が多いのでcssで初期状態の調整する機会はあまり多くないかと思います。また、同じ画像をサイト内で複数箇所に使用する可能性もあるので単独で使用するのは好ましくない事が多いと考えています。

特定の場面で少しエフェクトを加えたい時や、hoverした時のアクセントとして利用する事が多いと思いますので是非参考にしてみてください。

blur(px)

画像をぼかします。値にはピクセル数を指定します。

filter: blur(5px);

brightness(%)

画像の明るさを調整します。100% が元の明るさです。

filter: brightness(150%);

contrast(%)

画像のコントラストを調整します。100% が元のコントラストです。

filter: contrast(200%);

grayscale(%)

画像をグレースケール（白黒）にします。100% で完全に白黒になります。

filter: grayscale(100%);

hue-rotate(deg)

色相を回転させます。値には度数（deg）を指定します。0度から360度の範囲です。

filter: hue-rotate(90deg);

invert(%)

画像の色を反転させます。100% で完全に反転します。

filter: invert(100%);

opacity(%)

透明度を調整します。0% で完全に透明、100% で完全に不透明です。

filter: opacity(50%);

saturate(%)

色の鮮やかさ（彩度）を調整します。100% が元の彩度です。

filter: saturate(200%);

sepia(%)

セピア調（古びた感じ）に変換します。100% で完全にセピアになります。

filter: sepia(100%);

drop-shadow(offset-x offset-y blur-radius color)

ドロップシャドウを追加します。オフセット、ぼかし半径、色を指定します。

filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));

複数のフィルターを組み合わせる

複数のフィルターをスペースで区切って連続して適用できます。

filter: grayscale(50%) blur(5px) contrast(120%);

画像が50%グレースケール化され、5pxのぼかしがかかり、コントラストが120%に増加します。

まとめ

filterプロパティは視覚的な効果を簡単に追加できる強力なツールです。画像だけでなく、テキストやその他の要素にも適用できますので、デザインの幅が広がります。様々なフィルターを組み合わせて、独自のエフェクトを作成してみてください。