CSS filter完全ガイド：brightness・grayscale・saturateの効果と使い方

CSS filter完全ガイド：brightness・grayscale・saturateの効果と使い方

CSSの filter プロパティを使うと、画像や要素に明るさ（brightness）・グレースケール（grayscale）・彩度（saturate）などの視覚効果を簡単に適用できます。
このページでは、各フィルター関数の効果や使い方を、実際の表示例とともに丁寧に解説します。
filterの基本構文から、複数の効果を組み合わせる方法、注意点まで網羅しています。

filter:blur(ぼかし半径px)　ぼかし

元画像

blur(1px)

blur(2px)

blur(4px)

<style>
  .blur1{filter:blur(1px);}
  .blur2{filter:blur(2px);}
  .blur4{filter:blur(4px);}
</style>
<img src="./imgs/c001s.jpg">
<img class="blur1" src="./imgs/c001s.jpg">
<img class="blur2" src="./imgs/c001s.jpg">
<img class="blur4" src="./imgs/c001s.jpg">

文字にフィルターを適用した場合

filter:brightness(明るさ%)　明るさ

元画像

brightness(50%)

brightness(100%)

brightness(150%)

<style>
  .brightness50 {filter:brightness(50%);}
  .brightness100{filter:brightness(100%);}
  .brightness150{filter:brightness(150%);}
</style>
<img src="./imgs/c002s.jpg">
<img class="brightness50"  src="./imgs/c002s.jpg">
<img class="brightness100" src="./imgs/c002s.jpg">
<img class="brightness150" src="./imgs/c002s.jpg">

filter:contrast(コントラスト%)　コントラスト

元画像

contrast(50%)

contrast(100%)

contrast(150%)

<style>
  .contrast50 {filter:contrast(50%);}
  .contrast100{filter:contrast(100%);}
  .contrast150{filter:contrast(150%);}
</style>
<img src="./imgs/c003s.jpg">
<img class="contrast50"  src="./imgs/c003s.jpg">
<img class="contrast100" src="./imgs/c003s.jpg">
<img class="contrast150" src="./imgs/c003s.jpg">

filter:drop-shadow(影オフセットx 影オフセットy 影をぼかす半径 影の色)　ドロップシャドー

元画像
 
 

drop-shadow
(8px 16px 0px
#777777)

drop-shadow
(8px 16px 4px
#777777)

drop-shadow
(8px 32px 4px
#444444)

<style>
  .drop-shadow50 {filter:drop-shadow(8px 16px 0px #777777);}
  .drop-shadow100{filter:drop-shadow(8px 16px 4px #777777);}
  .drop-shadow150{filter:drop-shadow(8px 32px 4px #444444);}
</style>
<img src="./imgs/c004s.jpg">
<img class="drop-shadow50"  src="./imgs/c004s.jpg">
<img class="drop-shadow100" src="./imgs/c004s.jpg">
<img class="drop-shadow150" src="./imgs/c004s.jpg">

文字にフィルターを適用した場合

filter:grayscale(グレースケール%)　グレースケール

元画像

grayscale(0%)

grayscale(50%)

grayscale(100%)

<style>
  .grayscale0  {filter:grayscale(  0%);}
  .grayscale50 {filter:grayscale( 50%);}
  .grayscale100{filter:grayscale(100%);}
</style>
<img src="./imgs/c005s.jpg">
<img class="grayscale0"   src="./imgs/c005s.jpg">
<img class="grayscale50"  src="./imgs/c005s.jpg">
<img class="grayscale100" src="./imgs/c005s.jpg">

filter:hue-rotate(色相変化角deg)　色相の変換

元画像

hue-rotate(90deg)

hue-rotate(180deg)

hue-rotate(270deg)

<style>
  .hue-rotate90 {filter:hue-rotate(90deg );}
  .hue-rotate180{filter:hue-rotate(180deg);}
  .hue-rotate270{filter:hue-rotate(270deg);}
</style>
<img src="./imgs/c006s.jpg">
<img class="hue-rotate90"  src="./imgs/c006s.jpg">
<img class="hue-rotate180" src="./imgs/c006s.jpg">
<img class="hue-rotate270" src="./imgs/c006s.jpg">

filter:invert(反転率%)　色の反転

元画像

invert(30%)

invert(50%)

invert(100%)

<style>
  .invert30{filter:invert(30%);} /* 反転率 */
  .invert50{filter:invert(50%);} /* 反転率 */
  .invert100{filter:invert(100%);} /* 反転率 */
</style>
<img src="./imgs/c007s.jpg">
<img class="invert30"  src="./imgs/c007s.jpg">
<img class="invert50"  src="./imgs/c007s.jpg">
<img class="invert100" src="./imgs/c007s.jpg">

filter:opacity(不透明度%)　不透明度

元画像

opacity(0%)

opacity(50%)

opacity(100%)

<style>
  .opacity0  {filter:opacity(0%)  ;}
  .opacity50 {filter:opacity(50%) ;}
  .opacity100{filter:opacity(100%);}
</style>
<img src="./imgs/c001s.jpg">
<img class="opacity0"   src="./imgs/c001s.jpg">
<img class="opacity50"  src="./imgs/c001s.jpg">
<img class="opacity100" src="./imgs/c001s.jpg">

filter:saturate(割合%)　彩度

元画像

saturate(0%)

saturate(100%)

saturate(200%)

<style>
  .saturate0  {filter:saturate(0%)  ;}
  .saturate100{filter:saturate(100%);}
  .saturate200{filter:saturate(200%);}
</style>
<img src="./imgs/c002s.jpg">
<img class="saturate0"   src="./imgs/c002s.jpg">
<img class="saturate100" src="./imgs/c002s.jpg">
<img class="saturate200" src="./imgs/c002s.jpg">

filter:sepia(セピア率%)　セピア

元画像

sepia(0%)

sepia(50%)

sepia(100%)

<style>
  .sepia0  {filter:sepia(0%)  ;}
  .sepia50 {filter:sepia(50%) ;}
  .sepia100{filter:sepia(100%);}
</style>
<img src="./imgs/c008s.jpg">
<img class="sepia0"   src="./imgs/c008s.jpg">
<img class="sepia50"  src="./imgs/c008s.jpg">
<img class="sepia100" src="./imgs/c008s.jpg">