filterの設定例

CSSフィルター（filter）を使って要素に対して明度や彩度を変更することができます。ホバー時の状態変化によく利用しているのを見かけるようになったので、いくつか設定例をまとめておきます。

ぼかし（blur）


filter: blur(5px);

filter: blur(0px);

filter: blur(3px);

filter: blur(6px);

明るさ（brightness）


filter: brightness(120%);
/* or */
filter: brightness(1.2);

filter: brightness(50%);

filter: brightness(100%);

filter: brightness(150%);

コントラスト（contrast）


filter: contrast(120%);

filter: contrast(50%);

filter: contrast(100%);

filter: contrast(150%);

影（drop-shadow）


filter: drop-shadow(10px 10px 10px gray);

filter: drop-shadow(10px 10px 10px gray);

filter: drop-shadow(20px 10px 10px gray);

filter: drop-shadow(10px 20px 10px gray);

filter: drop-shadow(10px 10px 20px gray);

グレースケール（grayscale）


filter: grayscale(50%);

filter: grayscale(0%);

filter: grayscale(50%);

filter: grayscale(100%);

色の反転（invert）


filter: invert(75%);

filter: invert(0%);

filter: invert(30%);

filter: invert(100%);

透過（opacity）


filter: opacity(50%);

filter: opacity(100%);

filter: opacity(80%);

filter: opacity(50%);

色相（hue-rotate）


filter: hue-rotate(90deg);

filter: hue-rotate(0deg);

filter: hue-rotate(90deg);

filter: hue-rotate(180deg);

filter: hue-rotate(270deg);

彩度（saturate）


filter: saturate(50%);

filter: saturate(50%);

filter: saturate(100%);

filter: saturate(150%);

セピア（sepia）


filter: sepia(50%);

filter: sepia(0%);

filter: sepia(50%);

filter: sepia(100%);