invert()
Quick Summary for invert()
The invert() CSS function inverts the color samples in the input image. Its result is a <filter-function>.
Code Usage for invert()
invert(amount)
More Details for invert()

invert()

The invert() CSS function inverts the color samples in the input image. Its result is a <filter-function>.

Syntax

invert(amount)

Parameters

amount

The amount of the conversion, specified as a <number> or a <percentage>. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.

Examples

Examples of correct values for invert()

invert(0)     /* No effect */ invert(.6)    /* 60% inversion */ invert(100%)  /* Completely inverted */

Specifications

Specification
Filter Effects Module Level 2 # funcdef-filter-invert

See also

<filter-function> blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() 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 3
CSS hue-rotate 3
CSS right 3
CSS opacity 4
CSS details 5
CSS select 5
CSS the 3
CSS index 5
CSS rotate 4
CSS color 3
CSS blur 3
CSS https 6
CSS active 4
CSS iframe 3
CSS git 3
CSS eaves 3
CSS hue 3
CSS CSS 3
CSS css 6
CSS invert 13
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 happiest People don't have the best of everything, they just make the best of everything.
Unknown
Random CSS Property

font-variant-alternates

The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
character-variant() css reference