Colorization effects

filter

The filter property applies sophisticated algorithms to change an image's color.

Property values

The possible filters are listed in this table. More than one filter may be applied by separating them with commas.

keyword units description
blur px Applies a blur effect to an image
brightness % Adjusts the brightness of an image, any value from 0 to infinity, where 100% is no adjustment
contrast % Adjusts the contrast of an image, any value from 0 to infinity, where 100% is no adjustment
saturate % Adjusts the color saturation level of an image, any value from 0 to infinity, where 100% is no adjustment
sepia % Shifts image to have more sepia color, from original 0%, to full sepia 100%
grayscale % Converts the image to black-and-white, from 0% to 100%
opacity % Adjust from fully transparent 0%, to fully opaque 100%
hue-rotate deg Applies a hue rotation color shift, from 0 to 360
drop-shadow px, px Adds a drop shadow (x,y) effect to an image
drop-shadow px, px, px Adds a drop shadow effect to an image with blur
drop-shadow px, px, px, px Adds a drop shadow effect to an image with blur and spread
drop-shadow px, px, color Adds a drop shadow effect to an image, with specified color value
drop-shadow px, px, px, color Adds a drop shadow effect to an image with blur, with specified color value
drop-shadow px, px, px, px, color Adds a drop shadow effect to an image with blur and spread, with specified color value
none Specifies that no filter is to be applied

Examples

filter: blur(2px);

filter: brightness(200%);

filter: hue-rotate(180);

filter: drop-shadow(2px, 2px);

filter: drop-shadow(2px, 2px, 6px, 10px, rgb(0,0,255));

filter: blur(2px), brightness(200%);
filter
0

style > appearance > filterColorization effects

🔗 🔎