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 3
CSS CSS 3
CSS invert 6
CSS git 2
CSS hue-rotate 9
CSS active 3
CSS hue 7
CSS index 2
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
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca
Random CSS Property

border-block-end-color

The border-block-end-color CSS property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.
border-block-end-color css reference