CSSのfilterで画像にフィルターをかける方法

2024.07.23
HTML&CSS

CSSのfilterプロパティを使用して、画像に色の変化や透過などのフィルターを追加する方法の備忘録です。

フィルターの使い方

filterは画像に直接設定して、フィルター効果を付与することができます。各フィルターは、関数と強度を示す値を設定します。関数の引数が妥当でない場合、noneが設定されます。

<img src="image.jpg" class="sample">

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

画像のグレースケールを調整するgrayscale関数を設定した例です。「70%」がフィルターの強度です。

フィルターの種類

blur（ぼかし）

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

blur関数は、画像にガウスぼかしを適用します。引数にぼかしの大きさを「px」や「em」等の単位で指定します。

brightness（明るさ）

.sample {
  filter: brightness(0.4);
}

brightness関数は、画像の明るさ、暗さを調整します。100%を基準に、0が最も暗くなり、100%を超える引数を指定すると明るくなります。例えば、brightness(200%)は、元の画像の2倍の明るさになります。「%」ではなく数値で指定した場合は小数点が適用され、0.4は40%と同じ明るさになります。

contrast（コントラスト）

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

contrast関数は、画像のコントラストを調整します。100%を基準に、数値が0に近づくほどコントラストが下がったグレーの画像になります。100%以上の数値を設定するとコントラストが上がった画像になります。「%」ではない、小数点を使用した数値での指定も可能です。

grayscale（グレースケール）

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

grayscale関数は、画像をグレースケールに変換します。0%を基準に、100%で完全にモノクロになります。「%」ではない、小数点を使用した数値での指定も可能です。

hue-rotate（色相回転）

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

hue-rotate関数は、色相の角度を回転させます。引数には「deg」で角度を指定します。180degで色相が反転して、360degで元の色相に戻ります。

invert（反転）

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

invert関数は、画像の階調を調整します。0%を基準に、100%で階調が反転します。「%」ではない、小数点を使用した数値での指定も可能です。

opacity（透過度）

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

opacity関数は、画像の透明度を調整します。100%を基準に、数値が小さいほど透過され、0%で完全な透明になります。「%」ではない、小数点を使用した数値での指定も可能です。

saturate（彩度）

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

saturate関数は、画像の彩度を調整します。100%を基準に、数値が小さいほど彩度が下がり、0%で白黒画像になります。鮮やかにしたい場合は、100%以上の数値を設定します。「%」ではない、小数点を使用した数値での指定も可能です。

sepia（セピア）

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

sepia関数は、画像をセピア調に変更します。0%を基準に、100%で完全にセピアになります。「%」ではない、小数点を使用した数値での指定も可能です。

drop-shadow（ドロップシャドウ）

.sample {
  filter: drop-shadow(12px 12px 7px gray);
}

drop-shadow関数は、画像の輪郭に沿ってドロップシャドウを適用します。引数は4つあり、左から順番に「x方向の位置」「y方向の位置」「ぼかしサイズ」「影の色」を指定します。

複数のフィルター

一つの画像に複数のフィルターをかけたい場合は、関数を半角スペース区切りで並べて指定します。

.sample {
  filter: sepia(70%) opacity(40%);
}

サンプルでは、セピアと不透明度を合わせて設定しています。

ホバー時のフィルター

画像の上にカーソルをのせた時にフィルターをかけたい場合は、:hoverをつけてfilterを設定します。

.sample {
  transition: 0.4s ease;
}
.sample:hover {
  filter: grayscale(70%);
}

下の画像にtransitionで、ホバー時の変化のスピードをつけ、:hoverでホバー時にグレースケールをかけるように設定しています。