CSSには便利なプロパティがたくさんあります！
その中でも、ぼかしや色変化などのグラフィック効果を付けるフィルターをご紹介

種類

元画像はこちら！

blur()

ぼかし

「px」などは使用できますが、「%」での指定はできません

filter: blur(10px);

brightness()

明度

「1」が基準です。「0」が最も暗くなり、「1」を超えると明るくなります

filter: brightness(1.5);

contrast()

コントラスト

「1」が基準です。「0」が最も低コントラストとなり、「1」を超えると高コントラストとなります

filter: contrast(1.5);

drop-shadow()

ドロップシャドウ

【書き方/半角スペースで区切ります】filter: drop-shadow(x方向 y方向 ぼかしサイズ カラー);

filter: drop-shadow(5px 5px 20px #aaa);

grayscale()

グレースケール

「0」が基準です。「1」が最もグレースケールになった状態となります

filter: grayscale(.5);

hue-rotate()

色相環

「deg」で角度を指定します。

filter: hue-rotate(120deg);

invert()

階調の反転

「0」が基準です。「1」が最も階調を反転した状態となります

filter: invert(.6);

opacity()

不透明度

「1」が基準です。「0」が最も透明になった状態となります

filter: opacity(.5);

saturate()

彩度

「1」が基準です。「0」が最も彩度が低い状態となります

filter: saturate(2);

sepia()

セピア

「0」が基準です。「1」が最もセピア調となった状態となります

filter: sepia(.8);