filter : 画像にフィルターをかける - CSSプロパティ - Web開発

概要へ移動

このページで解説するコードの実行結果。

色相

反転

彩度

モノクロ

セピア色

明るさ

コントラスト

不透明度

ぼかす

影をつける

sample

このページの説明で、ベースとして使用するHTMLとCSSコードは以下。

CSS : デフォルトCSS


div {
    font-size:          2em;            /*  文字の大きさ */
    margin:             5px;            /*  外側の余白 */
    color:              brown;          /*  文字の色 */
}

img {
    max-width:          230px;           /*  最大幅 */
}

HTML : 適用するHTML


<div class="sample"> sample </div>

<img class="sample" src="/img/samples/filter.jpg">

実行結果

sample

`filter`の概要

（表） `filter`の設定値
関数	機能	設定値
`blur()`	ぼかす（数値が大きいほどボケる。）	`3px`、`5px`など
`brightness()`	明るさ（数値が大きいほど明るい。`0`の時は`black`）	`0`～`2`程度
`contrast()`	コントラスト（数値が大きいほど高い。`0`の時は`gray`）	`0`～`2`程度
`drop-shadow()`	影	`box-shadow`、 `text-shadow`と同じ。
`grayscale()`	モノクロ（`1`の時は完全なモノクロ）	`0`～`1`
`hue-rotate()`	色相（`180deg`の時は補色）	`0deg`～`360deg`
`invert()`	反転（`1`の時は反転色）	`0`～`1`
`opacity()`	不透明度（`0`の時は完全な透明）	`0`～`1`
`saturate()`	彩度（`0`の時は完全なモノクロ）	`0`～`1`
`sepia()`	セピア色（`1`の時は完全なセピア）	`0`～`1`

`blur()` : ぼかす

CSS : blur


.sample  {
    filter:   blur( 4px );
}

実行結果

sample

CSS : blur


.sample1  {  filter:   blur( 1px );  }
.sample2  {  filter:   blur( 2px );  }
.sample3  {  filter:   blur( 3px );  }
.sample4  {  filter:   blur( 4px );  }
.sample5  {  filter:   blur( 5px );  }
.sample6  {  filter:   blur( 6px );  }
.sample7  {  filter:   blur( 7px );  }
.sample8  {  filter:   blur( 8px );  }
.sample9  {  filter:   blur( 9px );  }
.sample10 {  filter:   blur( 10px ); }

HTML : 適用するHTML


<img class="sample1"  src="/img/samples/filter.jpg" alt="1px"  title="1px" >
<img class="sample2"  src="/img/samples/filter.jpg" alt="2px"  title="2px" >
<img class="sample3"  src="/img/samples/filter.jpg" alt="3px"  title="3px" >
<img class="sample4"  src="/img/samples/filter.jpg" alt="4px"  title="4px" >
<img class="sample5"  src="/img/samples/filter.jpg" alt="5px"  title="5px" >
<img class="sample6"  src="/img/samples/filter.jpg" alt="6px"  title="6px" >
<img class="sample7"  src="/img/samples/filter.jpg" alt="7px"  title="7px" >
<img class="sample8"  src="/img/samples/filter.jpg" alt="8px"  title="8px" >
<img class="sample9"  src="/img/samples/filter.jpg" alt="9px"  title="9px" >
<img class="sample10" src="/img/samples/filter.jpg" alt="10px" title="10px">

blur() : 1px ～ 10px

`brightness()` : 明るさ

CSS : brightness


.sample  {
    filter:   brightness( 0.4 );
}

実行結果

sample

CSS : brightness


.sample0  {  filter:  brightness( 0 );    }
.sample2  {  filter:  brightness( 0.2 );  }
.sample4  {  filter:  brightness( 0.4 );  }
.sample6  {  filter:  brightness( 0.6 );  }
.sample8  {  filter:  brightness( 0.8 );  }
.sample10 {  filter:  brightness( 1 );    }
.sample12 {  filter:  brightness( 1.2 );  }
.sample14 {  filter:  brightness( 1.4 );  }
.sample16 {  filter:  brightness( 1.6 );  }
.sample18 {  filter:  brightness( 1.8 );  }
.sample20 {  filter:  brightness( 2 );    }

HTML : 適用するHTML


<img class="sample0"  src="/img/samples/filter.jpg" alt="0"    title="0"    >
<img class="sample2"  src="/img/samples/filter.jpg" alt="0.2"  title="0.2"  >
<img class="sample4"  src="/img/samples/filter.jpg" alt="0.4"  title="0.4"  >
<img class="sample6"  src="/img/samples/filter.jpg" alt="0.6"  title="0.6"  >
<img class="sample8"  src="/img/samples/filter.jpg" alt="0.8"  title="0.8"  >
<img class="sample10" src="/img/samples/filter.jpg" alt="1"    title="1"    >
<img class="sample12" src="/img/samples/filter.jpg" alt="1.2"  title="1.2"  >
<img class="sample14" src="/img/samples/filter.jpg" alt="1.4"  title="1.4"  >
<img class="sample16" src="/img/samples/filter.jpg" alt="1.6"  title="1.6"  >
<img class="sample18" src="/img/samples/filter.jpg" alt="1.8"  title="1.8"  >
<img class="sample20" src="/img/samples/filter.jpg" alt="2"    title="2"    >

brightness() : 0 ～ 2

`contrast()` : コントラスト

CSS : contrast


.sample  {
    filter:   contrast( 2 );
}

実行結果

sample

CSS : contrast


.sample0  {  filter:  contrast( 0 );    }
.sample2  {  filter:  contrast( 0.2 );  }
.sample4  {  filter:  contrast( 0.4 );  }
.sample6  {  filter:  contrast( 0.6 );  }
.sample8  {  filter:  contrast( 0.8 );  }
.sample10 {  filter:  contrast( 1 );    }
.sample12 {  filter:  contrast( 1.2 );  }
.sample14 {  filter:  contrast( 1.4 );  }
.sample16 {  filter:  contrast( 1.6 );  }
.sample18 {  filter:  contrast( 1.8 );  }
.sample20 {  filter:  contrast( 2 );    }

HTML : 適用するHTML


<img class="sample0"  src="/img/samples/filter.jpg" alt="0"    title="0"    >
<img class="sample2"  src="/img/samples/filter.jpg" alt="0.2"  title="0.2"  >
<img class="sample4"  src="/img/samples/filter.jpg" alt="0.4"  title="0.4"  >
<img class="sample6"  src="/img/samples/filter.jpg" alt="0.6"  title="0.6"  >
<img class="sample8"  src="/img/samples/filter.jpg" alt="0.8"  title="0.8"  >
<img class="sample10" src="/img/samples/filter.jpg" alt="1"    title="1"    >
<img class="sample12" src="/img/samples/filter.jpg" alt="1.2"  title="1.2"  >
<img class="sample14" src="/img/samples/filter.jpg" alt="1.4"  title="1.4"  >
<img class="sample16" src="/img/samples/filter.jpg" alt="1.6"  title="1.6"  >
<img class="sample18" src="/img/samples/filter.jpg" alt="1.8"  title="1.8"  >
<img class="sample20" src="/img/samples/filter.jpg" alt="2"    title="2"    >

contrast() : 0 ～ 2

`drop-shadow()` : 影をつける

CSS : drop-shadow


.sample  {
    filter:   drop-shadow( 3px 3px 3px red );
}

実行結果

sample

CSS : box-shadow


.sample  {
    box-shadow: 3px 3px 3px red;
}

実行結果

sample

CSS : text-shadow


.sample  {
    text-shadow: 3px 3px 3px red;
}

実行結果

sample

CSS : 両方


.sample  {
    box-shadow:  3px 3px 3px red;
    text-shadow: 3px 3px 3px red;
}

実行結果

sample

`grayscale()` : モノクロ

CSS : blgrayscaleur


.sample  {
    filter:   grayscale( 1 );
}

実行結果

sample

CSS : blur


.sample1  {  filter:   grayscale( 0.1 );  }
.sample2  {  filter:   grayscale( 0.2 );  }
.sample3  {  filter:   grayscale( 0.3 );  }
.sample4  {  filter:   grayscale( 0.4 );  }
.sample5  {  filter:   grayscale( 0.5 );  }
.sample6  {  filter:   grayscale( 0.6 );  }
.sample7  {  filter:   grayscale( 0.7 );  }
.sample8  {  filter:   grayscale( 0.8 );  }
.sample9  {  filter:   grayscale( 0.9 );  }
.sample10 {  filter:   grayscale( 1   );  }

HTML : 適用するHTML


<img class="sample1"  src="/img/samples/filter.jpg" alt="0.1"  title="0.1" >
<img class="sample2"  src="/img/samples/filter.jpg" alt="0.2"  title="0.2" >
<img class="sample3"  src="/img/samples/filter.jpg" alt="0.3"  title="0.3" >
<img class="sample4"  src="/img/samples/filter.jpg" alt="0.4"  title="0.4" >
<img class="sample5"  src="/img/samples/filter.jpg" alt="0.5"  title="0.5" >
<img class="sample6"  src="/img/samples/filter.jpg" alt="0.6"  title="0.6" >
<img class="sample7"  src="/img/samples/filter.jpg" alt="0.7"  title="0.7" >
<img class="sample8"  src="/img/samples/filter.jpg" alt="0.8"  title="0.8" >
<img class="sample9"  src="/img/samples/filter.jpg" alt="0.9"  title="0.9" >
<img class="sample10" src="/img/samples/filter.jpg" alt="1"    title="1"   >

grayscale() : 0.1 ～ 1

`hue-rotate()` : 色相

CSS : hue-rotate


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

実行結果

sample

CSS : blur


.sample1    {  filter:   hue-rotate( 0deg );     }
.sample15   {  filter:   hue-rotate( 15deg );    }
.sample30   {  filter:   hue-rotate( 30deg );    }
.sample45   {  filter:   hue-rotate( 45deg );    }
.sample60   {  filter:   hue-rotate( 60deg );    }
.sample75   {  filter:   hue-rotate( 75deg );    }
.sample90   {  filter:   hue-rotate( 90deg );    }
.sample105  {  filter:   hue-rotate( 105deg );   }
.sample120  {  filter:   hue-rotate( 120deg );   }
.sample135  {  filter:   hue-rotate( 135deg );   }
.sample150  {  filter:   hue-rotate( 150deg );   }
.sample165  {  filter:   hue-rotate( 165deg );   }
.sample180  {  filter:   hue-rotate( 180deg );   }
.sample195  {  filter:   hue-rotate( 195deg );   }
.sample210  {  filter:   hue-rotate( 210deg );   }
.sample225  {  filter:   hue-rotate( 225deg );   }
.sample240  {  filter:   hue-rotate( 240deg );   }
.sample255  {  filter:   hue-rotate( 255deg );   }
.sample270  {  filter:   hue-rotate( 270deg );   }
.sample285  {  filter:   hue-rotate( 285deg );   }
.sample300  {  filter:   hue-rotate( 300deg );   }
.sample315  {  filter:   hue-rotate( 315deg );   }
.sample330  {  filter:   hue-rotate( 330deg );   }
.sample345  {  filter:   hue-rotate( 345deg );   }

HTML : 適用するHTML


<img class="sample0"    src="/img/samples/filter.jpg" alt="0deg"    title="0deg"  >
<img class="sample15"   src="/img/samples/filter.jpg" alt="15deg"   title="15deg" >
<img class="sample30"   src="/img/samples/filter.jpg" alt="30deg"   title="30deg" >
<img class="sample45"   src="/img/samples/filter.jpg" alt="45deg"   title="45deg" >
<img class="sample60"   src="/img/samples/filter.jpg" alt="60deg"   title="60deg" >
<img class="sample75"   src="/img/samples/filter.jpg" alt="75deg"   title="75deg" >
<img class="sample90"   src="/img/samples/filter.jpg" alt="90deg"   title="90deg" >
<img class="sample105"  src="/img/samples/filter.jpg" alt="105deg"  title="105deg" >
<img class="sample120"  src="/img/samples/filter.jpg" alt="120deg"  title="120deg" >
<img class="sample135"  src="/img/samples/filter.jpg" alt="135deg"  title="135deg" >
<img class="sample150"  src="/img/samples/filter.jpg" alt="150deg"  title="150deg" >
<img class="sample165"  src="/img/samples/filter.jpg" alt="165deg"  title="165deg" >
<img class="sample180"  src="/img/samples/filter.jpg" alt="180deg"  title="180deg" >
<img class="sample195"  src="/img/samples/filter.jpg" alt="195deg"  title="195deg" >
<img class="sample210"  src="/img/samples/filter.jpg" alt="210deg"  title="210deg" >
<img class="sample225"  src="/img/samples/filter.jpg" alt="225deg"  title="225deg" >
<img class="sample240"  src="/img/samples/filter.jpg" alt="240deg"  title="240deg" >
<img class="sample255"  src="/img/samples/filter.jpg" alt="255deg"  title="255deg" >
<img class="sample270"  src="/img/samples/filter.jpg" alt="270deg"  title="270deg" >
<img class="sample285"  src="/img/samples/filter.jpg" alt="285deg"  title="285deg" >
<img class="sample300"  src="/img/samples/filter.jpg" alt="300deg"  title="300deg" >
<img class="sample315"  src="/img/samples/filter.jpg" alt="315deg"  title="315deg" >
<img class="sample330"  src="/img/samples/filter.jpg" alt="330deg"  title="330deg" >
<img class="sample345"  src="/img/samples/filter.jpg" alt="345deg"  title="345deg" >

hue-rotate() : 0.1 ～ 1

`invert()` : 反転

CSS : invert


.sample  {
    filter:   invert( 1 );
}

実行結果

sample

CSS : blur


.sample1  {  filter:   invert( 0.1 );  }
.sample2  {  filter:   invert( 0.2 );  }
.sample3  {  filter:   invert( 0.3 );  }
.sample4  {  filter:   invert( 0.4 );  }
.sample5  {  filter:   invert( 0.5 );  }
.sample6  {  filter:   invert( 0.6 );  }
.sample7  {  filter:   invert( 0.7 );  }
.sample8  {  filter:   invert( 0.8 );  }
.sample9  {  filter:   invert( 0.9 );  }
.sample10 {  filter:   invert( 1   );  }

HTML : 適用するHTML


<img class="sample1"  src="/img/samples/filter.jpg" alt="0.1"  title="0.1" >
<img class="sample2"  src="/img/samples/filter.jpg" alt="0.2"  title="0.2" >
<img class="sample3"  src="/img/samples/filter.jpg" alt="0.3"  title="0.3" >
<img class="sample4"  src="/img/samples/filter.jpg" alt="0.4"  title="0.4" >
<img class="sample5"  src="/img/samples/filter.jpg" alt="0.5"  title="0.5" >
<img class="sample6"  src="/img/samples/filter.jpg" alt="0.6"  title="0.6" >
<img class="sample7"  src="/img/samples/filter.jpg" alt="0.7"  title="0.7" >
<img class="sample8"  src="/img/samples/filter.jpg" alt="0.8"  title="0.8" >
<img class="sample9"  src="/img/samples/filter.jpg" alt="0.9"  title="0.9" >
<img class="sample10" src="/img/samples/filter.jpg" alt="1"    title="1"   >

invert() : 0.1 ～ 1

`opacity()` : 不透明度

CSS : opacity


.sample  {
    filter:   opacity( 0.2 );
}

実行結果

sample

CSS : blur


.sample0  {  filter:  opacity( 0 );    }
.sample1  {  filter:  opacity( 0.1 );  }
.sample2  {  filter:  opacity( 0.2 );  }
.sample3  {  filter:  opacity( 0.3 );  }
.sample4  {  filter:  opacity( 0.4 );  }
.sample5  {  filter:  opacity( 0.5 );  }
.sample6  {  filter:  opacity( 0.6 );  }
.sample7  {  filter:  opacity( 0.7 );  }
.sample8  {  filter:  opacity( 0.8 );  }
.sample9  {  filter:  opacity( 0.9 );  }
.sample10 {  filter:  opacity( 1   );  }

HTML : 適用するHTML


<img class="sample0"  src="/img/samples/filter.jpg" alt="0"    title="0"   >
<img class="sample1"  src="/img/samples/filter.jpg" alt="0.1"  title="0.1" >
<img class="sample2"  src="/img/samples/filter.jpg" alt="0.2"  title="0.2" >
<img class="sample3"  src="/img/samples/filter.jpg" alt="0.3"  title="0.3" >
<img class="sample4"  src="/img/samples/filter.jpg" alt="0.4"  title="0.4" >
<img class="sample5"  src="/img/samples/filter.jpg" alt="0.5"  title="0.5" >
<img class="sample6"  src="/img/samples/filter.jpg" alt="0.6"  title="0.6" >
<img class="sample7"  src="/img/samples/filter.jpg" alt="0.7"  title="0.7" >
<img class="sample8"  src="/img/samples/filter.jpg" alt="0.8"  title="0.8" >
<img class="sample9"  src="/img/samples/filter.jpg" alt="0.9"  title="0.9" >
<img class="sample10" src="/img/samples/filter.jpg" alt="1"    title="1"   >

opacity() : 0 ～ 1

`saturate()` : 彩度

CSS : saturate


.sample  {
    filter:   saturate( 0 );
}

実行結果

sample

CSS : blur


.sample0  {  filter: saturate( 0 );    }
.sample1  {  filter: saturate( 0.1 );  }
.sample2  {  filter: saturate( 0.2 );  }
.sample3  {  filter: saturate( 0.3 );  }
.sample4  {  filter: saturate( 0.4 );  }
.sample5  {  filter: saturate( 0.5 );  }
.sample6  {  filter: saturate( 0.6 );  }
.sample7  {  filter: saturate( 0.7 );  }
.sample8  {  filter: saturate( 0.8 );  }
.sample9  {  filter: saturate( 0.9 );  }
.sample10 {  filter: saturate( 1   );  }

HTML : 適用するHTML


<img class="sample0"  src="/img/samples/filter.jpg" alt="0"    title="0"   >
<img class="sample1"  src="/img/samples/filter.jpg" alt="0.1"  title="0.1" >
<img class="sample2"  src="/img/samples/filter.jpg" alt="0.2"  title="0.2" >
<img class="sample3"  src="/img/samples/filter.jpg" alt="0.3"  title="0.3" >
<img class="sample4"  src="/img/samples/filter.jpg" alt="0.4"  title="0.4" >
<img class="sample5"  src="/img/samples/filter.jpg" alt="0.5"  title="0.5" >
<img class="sample6"  src="/img/samples/filter.jpg" alt="0.6"  title="0.6" >
<img class="sample7"  src="/img/samples/filter.jpg" alt="0.7"  title="0.7" >
<img class="sample8"  src="/img/samples/filter.jpg" alt="0.8"  title="0.8" >
<img class="sample9"  src="/img/samples/filter.jpg" alt="0.9"  title="0.9" >
<img class="sample10" src="/img/samples/filter.jpg" alt="1"    title="1"   >

saturate() : 0 ～ 1

`sepia()` : セピア色

CSS : sepia


.sample  {
    filter:   sepia( 1 );
}

実行結果

sample

CSS : blur


.sample0  {  filter:  sepia( 0 );    }
.sample1  {  filter:  sepia( 0.1 );  }
.sample2  {  filter:  sepia( 0.2 );  }
.sample3  {  filter:  sepia( 0.3 );  }
.sample4  {  filter:  sepia( 0.4 );  }
.sample5  {  filter:  sepia( 0.5 );  }
.sample6  {  filter:  sepia( 0.6 );  }
.sample7  {  filter:  sepia( 0.7 );  }
.sample8  {  filter:  sepia( 0.8 );  }
.sample9  {  filter:  sepia( 0.9 );  }
.sample10 {  filter:  sepia( 1   );  }

HTML : 適用するHTML


<img class="sample0"  src="/img/samples/filter.jpg" alt="0"    title="0"   >
<img class="sample1"  src="/img/samples/filter.jpg" alt="0.1"  title="0.1" >
<img class="sample2"  src="/img/samples/filter.jpg" alt="0.2"  title="0.2" >
<img class="sample3"  src="/img/samples/filter.jpg" alt="0.3"  title="0.3" >
<img class="sample4"  src="/img/samples/filter.jpg" alt="0.4"  title="0.4" >
<img class="sample5"  src="/img/samples/filter.jpg" alt="0.5"  title="0.5" >
<img class="sample6"  src="/img/samples/filter.jpg" alt="0.6"  title="0.6" >
<img class="sample7"  src="/img/samples/filter.jpg" alt="0.7"  title="0.7" >
<img class="sample8"  src="/img/samples/filter.jpg" alt="0.8"  title="0.8" >
<img class="sample9"  src="/img/samples/filter.jpg" alt="0.9"  title="0.9" >
<img class="sample10" src="/img/samples/filter.jpg" alt="1"    title="1"   >

sepia() : 0 ～ 1

複数指定

複数のフィルターを設定するには、スペースで続ける。

例１。反転させて（invert()）セピア色（sepia()）にする

CSS : 反転させて（invert）セピア色（sepia）にする


.sample  {
    filter:   invert( 1 ) sepia( 1 );
}

実行結果

sample

例２。色相を変えて（hue-rotate()）コントラストを強調（contrast()）して影をつける（drop-shadow()）。

CSS : 色相を変えて（hue-rotate）コントラストを強調（contrast）して影をつける（drop-shadow）


.sample  {
    filter:     hue-rotate( 340deg ) 
                contrast( 2 ) 
                drop-shadow( 0px 0px 5px red );
}

実行結果

sample

リンク

MDN（日本語） > CSS > filter

filterの概要

blur() : ぼかす

brightness() : 明るさ

contrast() : コントラスト

drop-shadow() : 影をつける

grayscale() : モノクロ

hue-rotate() : 色相

invert() : 反転

opacity() : 不透明度

saturate() : 彩度

sepia() : セピア色

複数指定

リンク

`filter`の概要

`blur()` : ぼかす

`brightness()` : 明るさ

`contrast()` : コントラスト

`drop-shadow()` : 影をつける

`grayscale()` : モノクロ

`hue-rotate()` : 色相

`invert()` : 反転

`opacity()` : 不透明度

`saturate()` : 彩度

`sepia()` : セピア色