hue-rotate()
Quick Summary for hue-rotate()
The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a <filter-function>.
Code Usage for hue-rotate()
hue-rotate(angle) 
More Details for hue-rotate()

hue-rotate()

The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a <filter-function>.

Syntax

hue-rotate(angle) 

Parameters

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 lacuna value for interpolation is 0. There is no minimum or maximum value; hue-rotate(Ndeg) evaluates to N modulo 360.

Examples

Examples of correct values for hue-rotate

hue-rotate(-90deg)  /* Same as 270deg rotation */ hue-rotate(0deg)    /* No effect */ hue-rotate(90deg)   /* 90deg rotation */ hue-rotate(.5turn)  /* 180deg rotation */ hue-rotate(405deg)  /* Same as 45deg rotation */ 

Specifications

Specification
Filter Effects Module Level 2 # funcdef-filter-hue-rotate

See also

<filter-function> blur() brightness() contrast() drop-shadow() grayscale() invert() opacity() saturate() sepia()

Last modified: Aug 12, 2021, by MDN contributors

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
"We're tight-fisted with property and money, yet think too little of wasting time, the one thing about which we should all be the toughest misers.”
Seneca
Random CSS Property

border-end-start-radius

The border-end-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.
border-end-start-radius css reference