CSS Attributes Index CSS Filters
Applies a hue rotation to an input image.
{ filter: hue-rotate(angle) }
| angle |
Floating point number representing an angle value expressed in degrees, gradians, radians, or turns. |
The property is read/write with a default value of 0.
The hue-rotate( ) CSS function applies a color rotation to a visual object, effectively changing the element’s colors.
The passed parameter defines the relative change in the hue of the input sample, corresponding to an angle around the color wheel.
A value of 0 leaves the input unchanged.
A positive hue rotation increases the hue value, while a negative rotation decreases the hue value.
Hue-Rotate with positive and negative values in degrees.
filter: hue-rotate(0deg) |
filter: hue-rotate(90deg) |
filter: hue-rotate(-90deg) |
 |
|
|
Hue-Rotate with positive and negative values in gradians.
filter: hue-rotate(0grad) |
filter: hue-rotate(50grad) |
filter: hue-rotate(-50grad) |
|
|
|
Hue-Rotate with positive and negative values in radians.
filter: hue-rotate(0rad) |
filter: hue-rotate(10rad) |
filter: hue-rotate(-10rad) |
|
|
|
Hue-Rotate with positive values in turns.
filter: hue-rotate(0turn) |
filter: hue-rotate(.5turn) |
filter: hue-rotate(.75turn) |
|
|
|
grayscale invert opacity saturate sepia