The hue-rotate()
CSS function rotates the hue of an element and its contents. Its result is a <filter-function>()
.
Syntax
The hue-rotate()
function applies a color rotation to the elements on which it is applied.
hue-rotate(angle)
Values
angle
-
The relative change in hue of the input sample, specified as an
<angle>()
. A value of0deg
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 is0
. There is no minimum or maximum value. The effect of values above360deg
are, givenhue-rotate(Ndeg)
, evaluates toN
modulo 360.
The <angle>
CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. The following are equivalent:
hue-rotate(-180deg) hue-rotate(540deg) hue-rotate(200grad) hue-rotate(3.14159rad) hue-rotate(0.5turn)
Examples
With the backdrop-filter property
This example applies a hue-rotate()
filter via the backdrop-filter
CSS property to the paragraph, color shifting to the area behind the <p>
.
.container { background: url(image.jpg) no-repeat left / contain #011296; } p { backdrop-filter: hue-rotate(240deg); text-shadow: 2px 2px #011296; }
With the filter property
This example applies a hue-rotate()
filter via the filter
CSS property adding the color shift to the entire element, including content, border, and background image.
p { filter: hue-rotate(-60deg); text-shadow: 2px 2px blue; background-color: magenta; color: goldenrod; border: 1em solid rebeccapurple; box-shadow: inset -5px -5px red, 5px 5px yellow; }
With url() and the SVG hue-rotate filter
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:
<filter id="filterID"> <feColorMatrix type="hueRotate" values="90" /> </filter>
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:
See also
- CSS filter effects module
- The other
<filter-function>()
functions available to be used in values of thefilter()
andbackdrop-filter()
properties include: