CSSのfilterプロパティのblur,brightness,contrast,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)

(8px 16px 0px
#777777)

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

(8px 16px 4px
#777777)

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

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