【CSS】filter
filter
filterは、ぼかしや色の変化などのグラフィックス効果を要素に適用します。
画像などすべての要素に適用されます。
以下がfilterのサンプルになります。
各グラフィックス効果をもたらす関数については、以下で説明します。
blur（0px）
brightness（100%）
contrast（100%）
drop-shadow:x（0px）
drop-shadow:y（0px）
drop-shadow:r（0px）
grayscale（0%）
hue-rotate（0deg）
invert（0%）
opacity（100%）
saturate（100%）
sepia（0%）
blur
filter: blur(1px);blur()はぼかしを表し、pxなどの長さの指定によって効果を変化させます。
デフォルトは0pxとなっており、値を大きくすることでより大きなぼかし効果が得られます。
%は使用することができません。
brightness
filter: blur(100%);brightness()は輝度を表し、%または1を100%とした数値によって効果を変化させます。
デフォルトは100%となっており、0%に近づくほど暗く、100%より値を大きくするほど明るい効果が得られます。
contrast
filter: contrast(100%);contrast()はコントラストを表し、%または1を100%とした数値によって効果を変化させます。
デフォルトは100%となっており、0%に近づくほどグレーに近づき、100%より値を大きくするほど濃い色となります。
drop-shadow
filter: drop-shadow(2px 2px 2px gray);drop-shadow()は影を表し、水平方向（X 軸）、垂直方向（Y 軸）、ぼかし、影の色を指定します。
grayscale
filter: grayscale(0%);gray-scale()はグレースケールを表し、%または1を100%とした数値によって効果を変化させます。
デフォルトは0%となっており、100%に近づくほどグレーとなる効果が得られます。
hue-rotate
filter: hue-rotate(0deg);hue-rotate()は色相環を表し、degなどの角度を指定することによって効果を変化させます。
デフォルトは0degとなっており、360degまでの値を指定することで色相を変化させることができます。
invert
filter: invert(0%);invert()は色の反転を表し、%または1を100%とした数値によって効果を変化させます。
デフォルトは0%となっており、100%とすると完全に色が反転します。
opacity
filter: opacity(100%);opacity()は透過度を表し、%または1を100%とした数値によって効果を変化させます。
デフォルトは100%となっており、0%に近づくほど透明となる効果が得られます。
saturate
filter: saturate(100%);saturate()は彩度を表し、%または1を100%とした数値によって効果を変化させます。
デフォルトは100%となっており、0%に近づくほどグレーに近づき、100%より値を大きくするほど鮮明な色となります。
sepia
filter: sepia(0%);sepia()はセピアを表し、%または1を100%とした数値によって効果を変化させます。
デフォルトは0%となっており、100%に近づくほどセピア調の効果が得られます。
複数効果
上記で説明した関数は、スペース区切りで複数指定することが可能です。
filter: blur(2px) contrast(200%);ダークモードの対応
filterのinvert()とhue-rotate()を使用すれば以下のように簡単にダークモードに対応することができます。
filter: invert(100%) hue-rotate(180deg);ライトモード
赤 青 緑 黄
ダークモード
赤 青 緑 黄
ただしサンプルからもわかるように、色味が少し変化したり、画像や動画などの要素にも影響を与えてしまいます。
画像などを対象から外す場合は、:not()を活用しましょう。
*:not(img) {
filter: invert(100%) hue-rotate(180deg);
}