2020-01-07 更新

filterの設定例

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

目次

  • ぼかし(blur)
  • 明るさ(brightness)
  • コントラスト(contrast)
  • 影(drop-shadow)
  • グレースケール(grayscale)
  • 色の反転(invert)
  • 透過(opacity)
  • 色相(hue-rotate)
  • 彩度(saturate)
  • セピア(sepia)

ぼかし(blur)


filter: blur(5px);
change blur filter: blur(0px);
change blur filter: blur(3px);
change blur filter: blur(6px);

明るさ(brightness)


filter: brightness(120%);
/* or */
filter: brightness(1.2);
change brightness filter: brightness(50%);
change brightness filter: brightness(100%);
change brightness filter: brightness(150%);

コントラスト(contrast)


filter: contrast(120%);
change contrast filter: contrast(50%);
change contrast filter: contrast(100%);
change contrast filter: contrast(150%);

影(drop-shadow)


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

グレースケール(grayscale)


filter: grayscale(50%);
change grayscale filter: grayscale(0%);
change grayscale filter: grayscale(50%);
change grayscale filter: grayscale(100%);

色の反転(invert)


filter: invert(75%);
change invert filter: invert(0%);
change invert filter: invert(30%);
change invert filter: invert(100%);

透過(opacity)


filter: opacity(50%);
change opacity filter: opacity(100%);
change opacity filter: opacity(80%);
change opacity filter: opacity(50%);

色相(hue-rotate)


filter: hue-rotate(90deg);
change hue rotate filter: hue-rotate(0deg);
change hue rotate filter: hue-rotate(90deg);
change hue rotate filter: hue-rotate(180deg);
change hue rotate filter: hue-rotate(270deg);

彩度(saturate)


filter: saturate(50%);
change saturate filter: saturate(50%);
change saturate filter: saturate(100%);
change saturate filter: saturate(150%);

セピア(sepia)


filter: sepia(50%);
change sepia filter: sepia(0%);
change sepia filter: sepia(50%);
change sepia filter: sepia(100%);

CSS】関連記事