CSS Filters

Filter Functions

blur() Function

Applies a Gaussian blur to the input image.

brightness() Function

Applies a linear multiplier to the input image, making it appear more or less bright. Values are linear multipliers on the effect, with 0% creating a completely black image, 100% having no effect, and values over 100% brightening the image.

contrast() Function

Adjusts the contrast of the input image. A value of 0% makes the image grey, 100% has no effect, and values over 100% create a contrast.

drop-shadow() Function

Applies the parameter shadow as a drop shadow, following the contours of the image.

grayscale() Function

Converts the image to grayscale. A value of 100% is completely grayscale. The initial value of 0% leaves the input unchanged. Values between 0% and 100% produce linear multipliers on the effect.

hue-rotate() Function

Applies a hue rotation. The angle value defines the number of degrees around the hue color circle at which the input samples will be adjusted. A value of 0deg leaves the input unchanged.

invert() Function

Inverts the samples in the input image. A value of 100% completely inverts the image. A value of 0% leaves the input unchanged. Values between 0% and 100% have linear multipliers on the effect.

opacity() Function

Applies transparency. 0% makes the image completely transparent and 100% leaves the image unchanged.

saturate() Function

Saturates the image, with 0% being completely unsaturated, 100% leaving the image unchanged, and values of over 100% increasing saturation.

sepia() Function

Converts the image to sepia, with a value of 100% making the image completely sepia and 0% making no change.

url() Function

Use other resource (image) as filter.

Multiple Functions

You may combine any number of functions to manipulate the rendering. The filters are applied in the order declared.