CSS hue-rotate() Function
Example
Set various color rotations for an image:
#img1 {
filter: hue-rotate(200deg);
}
#img2 {
filter:
hue-rotate(90deg);
}
#img3 {
filter: hue-rotate(-90deg);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS hue-rotate() filter function applies
a color rotation to an element.
| Version: | CSS Filter Effects Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| hue-rotate() | 18 | 12 | 35 | 6 | 15 |
CSS Syntax
hue-rotate(angle)
| Value | Description |
|---|---|
| angle | Optional. Specifies an angle that represents the relative change in hue of the input sample. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. 0deg represents the original image (no effect). Default value is 0. |
More Examples
Example
Use hue-rotate() with the backdrop-filter property:
div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: hue-rotate(90deg);
backdrop-filter:
hue-rotate(90deg);
padding: 20px;
margin: 30px;
font-weight: bold;
}
Try it Yourself »
Related Pages
CSS reference: CSS filter property.
CSS reference: CSS blur() function.
CSS reference: CSS brightness() function.
CSS reference: CSS contrast() function.
CSS reference: CSS drop-shadow() function.
CSS reference: CSS grayscale() function.
CSS reference: CSS invert() function.
CSS reference: CSS opacity() function.
