トップへ(mam-mam.net/)

CSSのフィルター(filter)プロパティで色調変換する方法の解説

検索：

CSSのfilterプロパティを使うと簡単に「明るさ(brightness)」「コントラスト(contrast)」を調整したり、 「ぼかし(blur)」「ドロップシャドー(drop-shadow)」「グレースケール変換(grayscale)」「色相の変換(hue-rotate)」 「色の反転(invert)」「透明度(opacity)」「彩度の調整(saturate)」「セピア調に変換(sepia)」を行うことができます。

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">