HomeMenu
Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

filter

Description

The filter property for CSS specifies the filter of the element.

Syntax

CSS

filter: value;

JS

object.style.filter = "value";

Values

<'filter'> = none | <filter-value-list>
none

No filter effect is applied.

<filter-value-list> = [ <filter-function> | <url> ]+
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>
<blur()> = blur( <length>? )
blur()

Applies a Gaussian blur to the input image.

<length>

Specifies the length using a number followed by a unit of measurement.

<brightness()> = brightness( <number-percentage>? )
brightness()

Applies a linear multiplier to input image, making it appear more or less bright.

<number-percentage> = [ <number> | <percentage> ]
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<contrast()> = contrast( <number-percentage>? )
contrast()

Adjusts the contrast of the input.

<number-percentage> = [ <number> | <percentage> ]
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<drop-shadow()> = drop-shadow( <color>? && <length>{2,3} )
drop-shadow()

Applies a drop shadow effect to the input image.

<color>

Specifies the color using a keyword or a numerical specification.

<length>

Specifies the length using a number followed by a unit of measurement.

<grayscale()> = grayscale( <number-percentage>? )
grayscale()

Converts the input image to grayscale.

<number-percentage> = [ <number> | <percentage> ]
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<hue-rotate()> = hue-rotate( [ <angle> | <zero> ]? )
hue-rotate()

Applies a hue rotation on the input image.

<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<zero>

Represents a literal number with the value 0.

<invert()> = invert( <number-percentage>? )
invert()

Inverts the samples in the input image.

<number-percentage> = [ <number> | <percentage> ]
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<opacity()> = opacity( <number-percentage>? )
opacity()

Applies transparency to the samples in the input image.

<number-percentage> = [ <number> | <percentage> ]
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<sepia()> = sepia( <number-percentage>? )
sepia()

Converts the input image to sepia.

<number-percentage> = [ <number> | <percentage> ]
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<saturate()> = saturate( <number-percentage>? )
saturate()

Saturates the input image.

<number-percentage> = [ <number> | <percentage> ]
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<url> = url( <string> <url-modifier>* )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

Initial

none

Examples

1 · blur

2 · brightness

3 · contrast

4 · drop-shadow

5 · grayscale

6 · hue-rotate

7 · invert

8 · none

9 · opacity

10 · saturate

11 · sepia

12 · url

13 · JS