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 Items in CSS
rgb() rgba() :right right @right-bottom :root rotate rotate() rotate3d() rotateX() rotateY() rotateZ() row-gap ruby-align ruby-position saturate() scale scale() scale3d() scaleX() scaleY() scaleZ() :scope scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-align scroll-snap-stop scroll-snap-type @scroll-timeline
Related Search Terms
CSS height 2
CSS right 2
CSS css 3
CSS rotate 12
CSS iframe 5
CSS the 2
CSS https 6
CSS details 1
CSS select 4
CSS opacity 3
CSS eaves 2
CSS blur 4
CSS CSS 4
CSS invert 8
CSS git 3
CSS hue-rotate 15
CSS active 4
CSS hue 11
CSS index 3
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...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

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

The important thing is not to stop questioning. Curiosity has its own reason for existence. One cannot help but be in awe when he contemplates the mysteries of eternity, of life, of the marvelous structure of reality. It is enough if one tries merely to comprehend a little of this mystery each day. Never lose a holy curiosity.


Albert Einstein
Random CSS Property

min-width

The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
min-width css reference