明度を変える

明るさを変えたい場合は「brightness」フィルターを使って調整します。パラメータは0％以上の値が使える。 値を0％にすると、真っ黒。
100％で元々の明るさの画像を表示。
100％以上の値を指定すると、画像をさらに明るくできる。

SAMPLE

コントラストを変える

コントラストを変えたい場合は「contrast」フィルターを使って調整します。
明度と同じように、0以上の値が使えます。
値を0％にするとグレー1色に。
値を100％に設定すると元々のコントラスト。
100％よりも値を大きくするとどんどん画像のコントラストが大きくなります。
明るい部分と暗い部分の差を調整できるので細かい調整で便利かな

SAMPLE

彩度を変えてみたい

彩度を変えたい場合は「saturate」フィルターを使って調整します。
値を0％にすると画像の色彩がなくなり無彩色に
100％で元々の彩度
100％を超える値を指定すると鮮やかになります。
※ 負の値は使えません

SAMPLE

グレースケールに変える

グレースケールに変えたい場合は「grayscale」フィルターを使うと、画像をグレースケールにできます。
このフィルターは画像を少しずつグレーに近づけるので
値が0％だと画像は変化なし
100％にすると完全にグレーになります
※ 負の値は使えません。

SAMPLE

セピアカラーにする

セピアカラーに変えたい場合は「sepia」フィルターを使って調整します。
セピアの度合いは、
0％で元画像のまま
100％で完全にセピアになります。
※ 考え方はグレースケールと同じ
透明部分がなぜか黄ばみます

SAMPLE

色相回転

「hue-rotate」フィルターを使うと画像内のすべての色の色相が回転します。
色を回転させる角度は指定するパラメータの値で決まり、
0degは回転しないので画像は変化しませんし、360degで回転が一周し元の位置に戻るのでこちらも変化なしになります。
360degより大きい値の効果は一周目と重なります。90degと450degは同じ効果になります。

SAMPLE

階調反転

「invert」フィルターを使うと画像内のすべての色の階調を反転します。
反転の度合いは、
0％で元画像のまま
100％で完全に反転します

SAMPLE

ぼかし

「blur」フィルターを使うと画像にぼかしをかけて色をにじませて境界の外側に広げることができます。
半径のパラメータをフィルターに設定して、スクリーン上でブレンドするピクセル数を指定します。
値が大きくなるほど、ぼかしの度合いが強くなります
※ ％での指定はできません。

SAMPLE

ドロップシャドウ

「dropshadow」フィルターは、文字通り画像や文字にドロップシャドウ効果をかけます。
SVGなんかにやってみると面白いかも
このプロパティでは、x軸オフセット、y軸オフセット、ぼかし半径、色の指定が必要となります。

SAMPLE

文字に対して
drop-shadow(0px 0px 2px #f66);

文字に対してフィルターのテスト

透明度は割愛

参考サイト

Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい

明度や彩度の調整から、ぼかしやグレースケール化まで。CSSフィルターを使えば、Photoshopを使わなくても簡単なコードで画像の調整ができちゃいます。しかも動画にも使える……これは便利です！ フィルターはもともとSVG仕様の一部でしたが、使い勝手がよいので、W3Cは共通のフィルター効果をCSSにも追加する取り組みを始めました。CSSフィルターはとてもパワフルで、しかも信じられないほど簡単に使えま…

https://www.webprofessional.jp/css-filter-effects-blur-grayscale-brightness-and-more-in-css/