filter：画像やテキストにフィルタ効果を与える

filterプロパティの説明

filterは、画像やテキストにぼかしや色変化などのグラフィック的な効果を与えます。このプロパティに指定できる値は、1つまたは複数のフィルタ関数です。

filterプロパティを使うと、画像編集ソフトに見られるような様々な効果をCSSのみで実現できます。フィルタ関数には様々な種類があるため、必用に応じて記述方法を学んでいきましょう。

似たような機能を提供するプロパティにbackdrop-filterがあります。こちらは複数のレイヤー状に重なった要素の背後に効果を発揮します。

また、要素の描画モードを変えるbackground-blend-modeというプロパティもあります。こちらは写真などを重ねて合成するなどの機能を提供します。

filterに指定できる値

none

フィルタ効果を与えません。これが初期値です。

<filter-function-list>

CSSで使える<filter-function>またはSVGフィルタの値を空白区切りで指定します。各値を以下に示します。

blur()

ぼかしの度合いを指定します。かっこの中には、ガウス関数の標準偏差を示す単位つきの数値が入ります。ここで指定した値が画面上のピクセルを互いにいくつ混合するかということの半径を表します。

brightness()

明るさの度合いを指定します。かっこの中には、元の画像を基準にした割合や数値が入ります。例えば200%や2を入れれば二倍の明るさになり、50%や0.5を入れれば半分の明るさになります。

contrast()

コントラストの度合いを指定します。かっこの中には、元の画像を基準にした割合や数値が入ります。例えば200%や2を入れれば二倍のコントラストになり、50%や0.5を入れれば半分のコントラストになります。

drop-shadow()

要素に含まれる画像に影を与えます。かっこの中には、影のオフセット値やぼかしの半径が入ります。この効果は要素全体の範囲ではなく、画像自体の形に合った影を作成します。

grayscale()

色をグレースケールに変化させます。かっこの中には、彩度をどの程度まで落とすかを示す割合や数値が入ります。例えば、完全なグレースケールは100%か1で表されます。

hue-rotate()

色相の変更を指定します。かっこの中には、色相環を回転させる角度が入ります。例えば、180degや.5turnは色相を対極に変更したことを表します。

invert()

色を反転させる度合いを指定します。かっこの中には、反転させる割合や数値が入ります。例えば、色を完全に反転する場合は100%または1を記述します。

opacity()

色の透明度を指定します。かっこの中には、透明度を示す割合や数値が入ります。例えば、50%または.5は半透明となります。

saturate()

彩度を変化させる度合いを指定します。かっこの中には、彩度を示す割合や数値が入ります。例えば、50%または.5を指定すると彩度が下がりくすんだ色になります。

sepia()

色をセピア調に変化させます。かっこの中には、色調をどの程度変化させるかを示す割合や数値が入ります。例えば、100%や1を指定すると完全なセピア調になります。

filterの使い方とサンプル

filterプロパティの構文は以下の通りです。

/* キーワード値 */
filter: none;

/* <filter-function>値 */
filter: blur(3px);
filter: brightness(50%);
filter: contrast(.5);
filter: drop-shadow(5px 5px 10px #000);
filter: grayscale(0.3);
filter: hue-rotate(180deg);
filter: invert(60%);
filter: opacity(24%);
filter: saturate(.3);
filter: sepia(86%);

/* 複数のフィルター */
filter: contrast(1.5) brightness(5%);

/* SVGフィルタのURL */
filter: url("file.svg");

/* グローバル値 */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

filterの実例

それでは実際にfilterプロパティを適用した要素の変化を見ていきましょう。各フィルタ関数に異なる値を入力し、画像の変化具合いを比較します。