CSS | filter | フィルター

`filter`の種類
関数	機能	設定値	デフォルト
`hue-rotate()`	色相	`0deg`～`360deg`	`0deg`
`invert()`	反転	`0`～`1`	`0`
`saturate()`	彩度	`0`～`1`	`1`
`grayscale()`	モノクロ	`0`～`1`	`0`
`sepia()`	セピア	`0`～`1`	`0`
`brightness()`	明るさ	`0`以上	`1`
`contrast()`	コントラスト	`0`以上	`1`
`opacity()`	不透明度	`0`～`1`	`1`
`blur()`	ぼかし	`0px`以上	`0`
`drop-shadow()`	影	`text-shadow`や `box-shadow`と同じ	(なし)

以下の文字列と画像にフィルターを掛けます。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

実行結果初期状態

桜

`hue-rotate()` | 色相

色相を0deg～360degの間で指定します。0degの時は元と同じ、180degの時は補色になります。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果0deg

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果60deg

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果120deg

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果180deg

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果240deg

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果300deg

桜

`invert()` | 反転

反転を0～1で指定します。 0の時は元と同じ、1の時は完全な反転色になります。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: invert( 0 );
}

実行結果0

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: invert( 0.2 );
}

実行結果0.2

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: invert( 0.4 );
}

実行結果0.4

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: invert( 0.6 );
}

実行結果0.6

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: invert( 0.8 );
}

実行結果0.8

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: invert( 1 );
}

実行結果1

桜

`saturate()` | 彩度

彩度は0～1の間で指定します。 0の時は完全なモノクロ、1の時は元の彩度になります。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: saturate( 0 );
}

実行結果0

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: saturate( 0.2 );
}

実行結果0.2

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: saturate( 0.4 );
}

実行結果0.4

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: saturate( 0.6 );
}

実行結果0.6

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: saturate( 0.8 );
}

実行結果0.8

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: saturate( 1 );
}

実行結果1

桜

`grayscale()` | モノクロ

モノクロは0～1の間で指定します。 0の場合は元の画像、1の時は完全なモノクロになります。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: grayscale( 0 );
}

実行結果0

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: grayscale( 0.2 );
}

実行結果0.2

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: grayscale( 0.4 );
}

実行結果0.4

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: grayscale( 0.6 );
}

実行結果0.6

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: grayscale( 0.8 );
}

実行結果0.8

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: grayscale( 1 );
}

実行結果1

桜

`sepia()` | セピア

セピアは0～1の間で指定します。 0の場合は元の画像、1の時は完全なモノクロになります。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: sepia( 0 );
}

実行結果0

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: sepia( 0.2 );
}

実行結果0.2

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: sepia( 0.4 );
}

実行結果0.4

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: sepia( 0.6 );
}

実行結果0.6

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: sepia( 0.8 );
}

実行結果0.8

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: sepia( 1 );
}

実行結果1

桜

`brightness()` | 明るさ

明るさは0以上で設定します。数値が大きいほど明るくなり、デフォルトは1、0の時はblackになります。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: brightness( 0 );
}

実行結果brightness( 0 )

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: brightness( 0.5 );
}

実行結果brightness( 0.5 )

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: brightness( 1 );
}

実行結果brightness( 1 )

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: brightness( 1.5 );
}

実行結果brightness( 1.5 )

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: brightness( 2 );
}

実行結果brightness( 2 )

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: brightness( 2.5 );
}

実行結果brightness( 2.5 )

桜

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

コントラストは0以上で設定します。数値が大きいほどコントラストは高くなり、デフォルトは1、0の時はgrayになります。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: contrast( 0 );
}

実行結果0

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: contrast( 0.5 );
}

実行結果0.5

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: contrast( 1 );
}

実行結果1

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: contrast( 1.5 );
}

実行結果1.5

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: contrast( 2 );
}

実行結果2

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: contrast( 2.5 );
}

実行結果2.5

桜

`opacity()` | 不透明度

不透明度は0～1の間で指定します。 0の場合は完全な透明、1の時は元の画像になります。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: opacity( 0 );
}

実行結果0

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: opacity( 0.2 );
}

実行結果0.2

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: opacity( 0.4 );
}

実行結果0.4

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: opacity( 0.6 );
}

実行結果0.6

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: opacity( 0.8 );
}

実行結果0.8

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: opacity( 1 );
}

実行結果1

桜

`blur()` | ぼかし

数値が大きいほど大きくボケます。0の場合は元の画像です。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


.sample {
    filter: blur( 0 );
}

実行結果0

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果1px

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果2px

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果3px

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果4px

桜

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果5px

桜

`drop-shadow()` 影

text-shadowやbox-shadowと同じように設定します。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果drop-shadow()

桜

複数のフィルターを設定する

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

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果invert() sepia()

桜

フィルターの順番が異なると結果も異なることに注意してください。

HTML


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

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

CSS


div {
    color:     red;
    font-size: 2rem;
}

img { max-width: 230px; }

CSS


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

実行結果sepia() invert()

桜

hue-rotate() | 色相

invert() | 反転

saturate() | 彩度

grayscale() | モノクロ

sepia() | セピア

brightness() | 明るさ

contrast() | コントラスト

opacity() | 不透明度

blur() | ぼかし

drop-shadow() 影

複数のフィルターを設定する

`hue-rotate()` | 色相

`invert()` | 反転

`saturate()` | 彩度

`grayscale()` | モノクロ

`sepia()` | セピア

`brightness()` | 明るさ

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

`opacity()` | 不透明度

`blur()` | ぼかし

`drop-shadow()` 影