• HOME > 
  • CSS > 
  • CSSで写真の明るさ(明度)を調整する方法【filterプロ...

CSSで写真の明るさ(明度)を調整する方法【filterプロパティbrightness】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2025年01月06日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

CSSだけで画像の明度を調整できる?

CSSのfilterプロパティのbrightness()関数を使うと、画像(要素)の明るさを変更することができます。

画像編集ソフトを使うことなくCSSだけで画像を明るくしたり暗くすることが可能です。

filterプロパティのbrightnessの例

filterプロパティとは?

CSSのfilterプロパティは、画像や要素に様々な視覚効果を加えることができるプロパティです。

明るさの調整以外にも、セピア化や、色調変更、ぼかし加工など、画像編集ソフトで加工するような処理をCSSだけで簡単に実装できるのが特徴です。

filterプロパティならびに他の関数についてはこちらのページにまとめています。

filter:brightnessの使い方

filterプロパティのbrightness()関数は以下のように記述して使います。

filterプロパティのbrightnessの書き方

元の画像そのままの状態を100%とし、明るくしたい場合はそれより大きい数値を指定、暗くしたい場合は小さい数値を指定します。

下記の例では、brightness関数に150%を指定しているので、表示される画像は元より1.5倍明るくなっています。

HTML

<img src="sample1.png" class="myFilter brightness1">

CSS

img.myFilter.brightness1{
    filter: brightness(150%);
}
filterプロパティのbrightnessで1.5倍明るくする例

数値による表示結果の違い

brightness関数による明度の調整はパーセンテージを使って行います。100%を基準とし、それを上回るほど明るくなり、反対に下回るほど画像は暗くなります。

パーセンテージによる表示結果の違いの例は下図の通りです。

filterプロパティのbrightnessのパーセンテージによる表示結果

アニメーションさせながら明るさを変更する

filterプロパティの利点のひとつとして、transitionやanimationプロパティと組み合わせることで効果をアニメーションで見せることができるという点が挙げられます。

下図のような写真を徐々に明るくなったり暗くなったりするアニメーションは、CSSだけであっという間に実装できます。

今回作成したコードは以下の通りです。

CSS

img.myFilter.brightness-anime{
    animation: brightnessAnime 5s infinite;
}
@keyframes brightnessAnime{
    0%{
        filter:brightness(100%);
    }
    25%{
        filter:brightness(150%);
    }
    50%{
        filter: brightness(100%);
    }
    75%{
        filter: brightness(50%);
    }
    100%{
        filter: brightness(100%);
    }
}

2行目animationプロパティを使ってアニメーションを設定します。(今回は例としてアニメーションがわかりやすいようにinfiniteを指定してアニメーションが繰り返されるようにしています)

4行目@keyframesでアニメーションの動きを設定します。

5行目~元の画像を少しづつ明るくした後、元の状態を経由して暗くなるように指定しました。

animationプロパティの使い方について詳しくはこちらのページにまとめています。

まとめ

以上が、filterプロパティのbrightness()関数を使ってCSSだけで画像の明度を調整する方法です。

画像編集ソフトいらずで手軽に写真の明るさを変更できるので表現の幅が広がりそうですね。

広告
広告

関連する記事

サムネイル

【SCSS入門】@extendでスタイルを継承させる方法

2025年09月02日
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つま […]
サムネイル

【SCSS入門】@mixinでスタイルのまとまりを再利用する

2025年09月02日
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つま […]
サムネイル

【SCSS入門】入れ子(ネスト)の使い方【アンパサンド】

2025年09月01日
最終更新日:2025年09月02日
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つま […]
サムネイル

【SCSS入門】SCSSにおける変数の使い方【グローバルスコ……

2025年09月01日
最終更新日:2025年09月02日
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つま […]
サムネイル

【SCSS入門】VSCodeの拡張機能で即時コンパイルする方……

2025年09月01日
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つま […]
サムネイル

CSSのbackground-clipによるテキスト装飾【切……

2025年03月06日
background-clipプロパティを活用して文字の形に画像を切り抜いたり、文字にグラデーションを掛ける方法について備忘録としてまとめます。 backgro […]
サムネイル

CSS内で独自の変数を定義・参照する方法【カスタムプロパティ……

2025年02月06日
今更ながらCSSで変数を使えることを知ったので、今回はカスタムプロパティの使い方について備忘録としてまとめてみます。 CSSのカスタムプロパティとは? CSSの […]