画像を明るくしたりぼかしたりしたいという時、Photoshopを立ち上げて調整…ってそんなことしなくても実はcssでできちゃうんです！
今回はCSSのfilterプロパティを使った様々な色調調整の効果とfilterプロパティの使い方を紹介します！
Index
ぼかし：blur(px)
0が元の状態。数字が大きくなるほどぼける。
img {
filter: blur(0); /* 変化なし */
filter: blur(5px); /* 半径5pxでぼける */
}明度：brightness(%)
1.0が元の明るさ。これを基準に値が大きくなると明るくなり、小さくなるほど暗くなります。
img {
filter: brightness(1); /* 変化なし */
filter: brightness(1.5); /* 明るさ1.5倍 */
filter: brightness(150%); /* %で設定も可 */
}コントラスト：contrast(%)
1.0が元のコントラスト。これを基準に値が大きいほどコントラストが強くなり、小さくなるほど弱くなります。
img {
filter: brightness(1); /* 変化なし */
filter: brightness(1.5); /* 明るさ1.5倍 */
filter: brightness(150%); /* %で設定も可 */
}ドロップシャドウ：drop-shadow(数値)
ドロップシャドウをかける。水平方向、垂直方向、ぼかす半径(任意)、色(任意)の４つの値をスペースで区切って設定する。
img {
filter: drop-shadow(5px 5px 10px #28aeb8);
}グレースケール：grayscale(%)
0が元の状態。0~100%の間で設定し、100%で完全にグレースケールになる。
img {
filter: grayscale(0%); /* 変化なし */
filter: grayscale(50%); /* 50％グレースケール */
filter: grayscale(0.5); /* 0~1でも設定可 */
}色相：hue-rotate(deg)
0degが元の状態。0~100%の間で設定し、100%完全に階調が反転する。
img {
filter: hue-rotate(0deg); /* 変化なし */
filter: invert(45deg); /* 45度回転 */
filter: hue-rotate(-90deg); /* 270回転と同じ */
}階調反転：invert(%)
0degが元の状態。0~100%の間で色相環の回転角を設定する。360以上は一周以上するので360で割った余りが設定される。
img {
filter: invert(0deg); /* 変化なし */
filter: invert(80%); /* 50%反転 */
filter: invert(0.8); /* 0~1でも設定可 */
}不透明度：opacity(%)
1が元の状態で不透明。0~100%の間で色相環の回転角を設定する。360以上は一周以上するので360で割った余りが設定される。
img {
filter: opacity(1); /* 変化なし */
filter: opacity(50%); /* 50%透明 */
filter: opacity(0.5); /* 0~1でも設定可 */
filter: opacity(0); /* 完全に透明 */
}彩度：saturate(%)
1 が元の状態。これを基準に値が大きいほど鮮やかに、小さくなるほど彩度が下がり暗い印象になる。
img {
filter: saturate(1); /* 変化なし */
filter: saturate(1.5); /* 1.5倍鮮やかに */
filter: saturate(150%); /* %でも設定可 */
}セピア：sepia(%)
0が元の状態。0~100%の間で設定し、100%で完全にセピア色になる。
img {
filter: sepia(0); /* 変化なし */
filter: sepia(50%); /* 50%セピア色 */
filter: sepia(0.5); /* 0~1でも設定可 */
}filterプロパティの注意点
filterプロパティは比較的新しいCSSなのでブラウザーによってはサポートされてない場合があります。
サポート状況はこちらから確認できます。
