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 5
CSS right 5
CSS css 5
CSS rotate 26
CSS iframe 9
CSS the 4
CSS https 7
CSS details 1
CSS select 6
CSS opacity 5
CSS eaves 4
CSS blur 7
CSS CSS 5
CSS invert 11
CSS git 4
CSS hue-rotate 21
CSS active 5
CSS hue 16
CSS index 7
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 mind must be given relaxation; it will arise better and keener after resting. As rich fields must not be forced-for their productiveness, the have no rest, will quickly exhaust them constantlabor will break the vigor of the mind, but if it is released and relaxed a little while, it will recover its powers
Seneca
Random CSS Property

clip-path

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
clip-path css reference