The hue-rotate()
CSS function rotates the hue of an element and its contents. Its result is a <filter-function>
.
The hue-rotate()
CSS function rotates the hue of an element and its contents. Its result is a <filter-function>
.
angle
The relative change in hue of the input sample, specified as an <angle>
. A value of 0deg
leaves the input unchanged. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. The initial value for interpolation is 0
. There is no minimum or maximum value. The effect of values above 360deg
are, given hue-rotate(Ndeg)
, evaluates to N
modulo 360.
The <angle>
CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. The following are equivalent:
This example applies a hue-rotate()
filter via the filter
CSS property adding the color shift to to the entire element, including content, border, and background image.
The SVG <filter>
element is used to define custom filter effects that can then be referenced by id
. The <filter>
's <feColorMatrix>
primitive hueRotate
type provides the same effect. Given the following:
These values produce the same results:
filter: hue-rotate(90deg); /* 90deg rotation */ filter: url(#filterID); /* with embedded SVG */ filter: url(folder/fileName.svg#filterID); /* external svg filter definition */
This example shows three images: the image with a hue-rotate()
filter function applied, the image with an equivalent url()
filter applied, and the original images for comparison:
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
hue-rotate |
18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
<filter-function>
functions available to be used in values of the filter
and backdrop-filter
properties include:
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate