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 |