画像をぼかしたりグレースケールにしたり彩度を上げたり、何かしら画像を加工したい場合、PhotoShopなどの画像加工ソフトを使用して画像自体のデータを書き換えることで目的の画像を作成することが出来ます。

しかし元画像を加工しなくてもCSSのみで画像の色を変化させることが出来ます。

今回の記事では画像の色を加工するfilterプロパティについて紹介します。

なお、この記事でご紹介するHTMLの構造は以下のものを使用します。

<img src="https://irodori-design-web.com/wp-content/uploads/2023/11/1809.jpg" width="320px">

画像をぼかす【blur】

blurの基本的な使用方法

画像をぼかしたいときはfilterプロパティのblurを指定します。

CSSは以下のように指定します。

img {
    filter: blur(2px);
}

blurを指定する際はpxやemなどを使用します。%は指定することは出来ません。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

blurの割合ごとの見え方

以下のようにblurの割合によって画像の見え方が変化します。

blur(4px)

img {
    filter: blur(4px);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

blur(6px)

img {
    filter: blur(6px);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像の明度を変更する【brightness】

brightnessの基本的な使用方法

画像の明度を変更したいときはfilterプロパティのbrightnessを指定します。

CSSは以下のように指定します。

img {
    filter: brightness(1.2);
}

brightnessの値は1が無加工の状態で、0が最も暗くなり、1を超える数値を指定すると明るくなります。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

brightnessの割合ごとの見え方

以下のようにbrightnessの割合によって画像の見え方が変化します。

brightness(0.5)

img {
    filter: brightness(0.5);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

brightness(1.5)

img {
    filter: brightness(1.5);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像の彩度を変更する【saturate】

saturateの基本的な使用方法

画像の彩度を変更したいときはfilterプロパティのsaturateを指定します。

CSSは以下のように指定します。

img {
    filter: saturate(1.2);
}

saturateの値は1が無加工の状態で、0が最も彩度が低くなり、1を超える数値を指定すると彩度が高くなります。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

saturateの割合ごとの見え方

以下のようにsaturateの割合によって画像の見え方が変化します。

saturate(0.5)

img {
    filter: saturate(0.5);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

saturate(1.5)

img {
    filter: saturate(1.5);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像のコントラストを変更する【contrast】

contrastの基本的な使用方法

画像のコントラストを変更したいときはfilterプロパティのcontrastを指定します。

CSSは以下のように指定します。

img {
    filter: contrast(1.2);
}

contrastの値は1が無加工の状態で、0が最もコントストが低くなり、1を超える数値を指定するとコントラストが高くなります。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

contrastの割合ごとの見え方

以下のようにcontrastの割合によって画像の見え方が変化します。

contrast(0.5)

img {
    filter: contrast(0.5);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

contrast(1.5)

img {
    filter: contrast(1.5);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像をグレースケールにする【grayscale】

grayscaleの基本的な使用方法

画像のグレースケールを変更したいときはfilterプロパティのgrayscaleを指定します。

CSSは以下のように指定します。

img {
    filter: grayscale(1);
}

grayscaleの値は0が無加工の状態で、1になるにつれて画像がグレースケール加工になります。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

grayscaleの割合ごとの見え方

以下のようにgrayscaleの割合によって画像の見え方が変化します。

grayscale(0.5)

img {
    filter: grayscale(0.5);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

grayscale(0.3)

img {
    filter: grayscale(0.3);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像をセピアにする【sepia】

sepiaの基本的な使用方法

画像のセピアを変更したいときはfilterプロパティのsepiaを指定します。

CSSは以下のように指定します。

img {
    filter: sepia(1);
}

sepiaの値は0が無加工の状態で、1になるにつれて画像がセピア加工になります。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

sepiaの割合ごとの見え方

以下のようにsepiaの割合によって画像の見え方が変化します。

sepia(0.5)

img {
    filter: sepia(0.5);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

sepia(0.3)

img {
    filter: sepia(0.3);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像の色相を変更する【hue-rotate】

hue-rotateの基本的な使用方法

画像の色相を変更したいときはfilterプロパティのhue-rotateを指定します。

CSSは以下のように指定します。

img {
    filter: hue-rotate(120deg);
}

hue-rotateの値はdegで角度を指定します。0deg～360degの間での指定が基本となりますが360deg以上の指定も可能です。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

hue-rotateの割合ごとの見え方

以下のようにhue-rotateの割合によって画像の見え方が変化します。

hue-rotate(180deg)

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

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

hue-rotate(240deg)

img {
    filter: hue-rotate(240deg);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像の階調を変更する【invert】

invertの基本的な使用方法

画像の階調を変更したいときはfilterプロパティのinvertを指定します。

CSSは以下のように指定します。

img {
    filter: invert(1);
}

invertの値は0が無加工の状態で、1になるにつれて画像の階調が反転していきます。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

invertの割合ごとの見え方

以下のようにinvertの割合によって画像の見え方が変化します。

invert(0.6)

img {
    filter: invert(0.6);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

invert(0.3)

img {
    filter: invert(0.3);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像の透明度を変更する【opacity】

opacityの基本的な使用方法

画像の透明度を変更したいときはfilterプロパティのopacityを指定します。

CSSは以下のように指定します。

img {
    filter: opacity(0.7);
}

opacityの値は1が無加工の状態で、0になるにつれて画像が半透明の状態になっていきます。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

opacityの割合ごとの見え方

以下のようにopacityの割合によって画像の見え方が変化します。

opacity(0.5)

img {
    filter: opacity(0.5);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

opacity(0.2)

img {
    filter: opacity(0.2);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像に影を入れる【drop-shadow】

drop-shadowの基本的な使用方法

画像の影を入れたいときはfilterプロパティのdrop-shadowを指定します。

CSSは以下のように指定します。

img {
    filter: drop-shadow(5px 5px 5px #000);
}

drop-shadowの値は4つ指定します。一つ目から順に「x方向」「y方向」「ぼかしの度合」「影の色」となります。

実装イメージは以下の通りです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

今回ご紹介したfilterプロパティを使用することで画像をソフトなどで加工しなくてもCSSのみで加工することが出来ます。マウスホバーの際、ぼかしたり、グレースケールにしたりする際、通常画像と加工画像の2枚用意する必要もなくなります。

便利なプロパティなので是非実際の制作で使用してきたいですね。