CSSのfilterプロパティを利用したフィルター効果一覧

前回の記事 CSSのみでテキストや画像にぼかし効果を付ける では、ぼかし（ブラー）効果について書きました。今回はその他のフィルター効果をご紹介します。

HTMLでの記述はこんな感じです。

<div class="sample">
フィルター効果を適用したい要素を記述
</div>

この画像をサンプルにフィルター効果をご確認ください。

ぼかし blur

ぼかし効果はpxの単位で調整可能です。

.sample {
 filter: blur(5px);
}

.sample-1a{filter: blur(5px);}

.sample-1b{filter: blur(10px);}

明度 brightness

明度は0〜1で調節できます。％でも指定可能。

.sample {
filter: brightness(30%);
}

.sample-2a{filter: brightness(30%);}

.sample-2b{filter: brightness(80%);}

コントラスト contrast

コントラストは0〜1で調節できます。％でも指定可能。

.sample {
filter: contrast(30%);
}

.sample-3a{filter: contrast(30%);}

.sample-3b{filter: contrast(80%);}

ドロップシャドウ drop-shadow

ドロップシャドウは左から『xの位置』『yの位置』『ぼかしの大きさ』『シャドウの色』を指定します。

.sample {
filter: drop-shadow(2px 2px 4px #000);
}

.sample-4a{filter: drop-shadow(2px 2px 4px #000);}

.sample-4b{filter: drop-shadow(4px 4px 6px #ff0);}

グレースケール

グレースケールは0〜1で調節できます。％でも指定可能。

.sample {
filter: grayscale(50%);
}

.sample-5a{filter: grayscale(50%);}

.sample-5b{filter: grayscale(100%);}

セピア　sepia

色相はdegを指定。180degで反転、360degで元の色相になります。

.sample {
filter: sepia(50%);
}

.sample-6a{filter: sepia(50%);}

.sample-6b{filter: sepia(100%);}

色相　hue-rotate

色相はdegを指定。180degで反転、360degで元の色相になります。

.sample {
filter: hue-rotate(180deg);
}

.sample-7a{filter: hue-rotate(180deg);}

.sample-7b{filter: hue-rotate(270deg);}

彩度　saturate

彩度は100%で元の彩度になります。サンプルの様に100%以上の指定も可能。0％でモノクロの画像になります。

.sample {
filter: saturate(50%);
}

.sample-8a{filter: saturate(50%);}

.sample-8b{filter: saturate(150%);}

階調　invert

階調は0%を基準に100％で反転します。

.sample {
filter: invert(80%);
}

.sample-9a{filter: invert(80%);}

.sample-9b{filter: invert(100%);}

透明度　opacity

透明度は100%を基準に0%で完全透過になります。

.sample {
filter: opacity(20%);
}

.sample-10a{filter: opacity(20%);}

.sample-10b{filter: opacity(60%);}