filter: は、画像や要素に視覚的な加工を加えられるCSSプロパティです。
ぼかしや白黒、明るさ調整などが簡単にできます。実案件をしたときに、hoverなどのアニメーションによく使われているなという印象を受けました。
最初はこれどうするの！？と思いましたが、なれると簡単で便利なプロパティです！

filterの種類

・blur：要素をぼかす

・brightness：明るさを調整する

・contrast：コントラストを強くする

・grayscale：白黒（モノクロ）にする

・sepia：セピア調にする

・saturate：彩度（鮮やかさ）を調整する

・hue-rotate：色味を変える

・invert：色を反転する

・opacity：透明度を加える

特に使用しやすfilter

基本の画像

blur（ぼかし）

blur() は要素をふんわりぼかすフィルターです。
数値を大きくするほど、ぼかしが強くなります。

img {
  filter: blur(5px);
}

brightness（明るさ）

brightness() は要素の明るさを調整するフィルターです。
数値を大きくすると明るくなり、小さくすると暗くなります。

brightness(1)：通常の明るさ
brightness(0.5)：暗くなる
brightness(2)：かなり明るくなる

img {
  filter: brightness(1.3);
}

contrast（コントラスト）

contrast() は画像や要素のコントラスト（色の差）を調整するフィルターです。
数値を大きくするとメリハリが強くなり、小さくすると淡い印象になります。

contrast(100%)：通常
contrast(50%)：コントラストが弱くなる
contrast(200%)：メリハリが強くなる

img {
  filter: contrast(200%);
}

grayscale（白黒）

grayscale() は画像を白黒（モノクロ）にするフィルターです。
割合を上げるほど白黒が強くなります。

grayscale(0%)：通常カラー
grayscale(50%)：少し白黒
grayscale(100%)：完全モノクロ

img {
  filter: grayscale(100%);
}

最後に

こういった画像変化も取り入れるとサイトがまたおしゃれになりますね！また新たに画像を用意していただかなくても加工ができるのでデザイナーさんの負担経験にもつながります。
CSSたくさんの種類がありますが、使いこなしていきましょう⭐

写真はフィンランドにいったムーミン村のムーミンのおうちです。可愛かった・・・。