How to Invert Color Using CSS

Invert colors of an image in CSS or JavaScript

CSS3 has a new filter attribute ~~which will only work in webkit browsers~~ supported in webkit browsers and in Firefox. It does not have support in IE or Opera mini:

img {   -webkit-filter: invert(1);   filter: invert(1);   }

<img src="http://i.imgur.com/1H91A5Y.png">

How can I invert color using CSS?

Add the same color of the background to the paragraph and then invert with CSS:

div {    background-color: #f00;}
p {     color: #f00;    -webkit-filter: invert(100%);    filter: invert(100%);}

<div>    <p>inverted color</p></div>

How to invert text color according to what's behind it? (not only background)

I thought mix-blend-mode: difference; would do just that. ✌️

#bg {
  background-image:url(https://thumbs.dreamstime.com/b/beautiful-multicolored-bokeh-lights-holiday-glitter-background-christmas-new-year-birthday-celebration-high-resolution-image-133585052.jpg);
}
#test {
  font-size:20vw;
  color:#FFF;
  mix-blend-mode: difference;
}

<div id="bg">
<div id="test">testing</div>
</div>

How to invert color of entire page when hovering on a link

You have to use Javascript to achieve what you want.
The idea is to apply a class with filter: invert(1); to the body element when the mouse is over (onmouseoover event) the link and remove it when the mouse leaves (onmouseleave event):

const invertLink = document.querySelector('#invert');const toggleDark = () => document.querySelector('body').classList.toggle('dark');invertLink.addEventListener('mouseover', toggleDark);invertLink.addEventListener('mouseleave', toggleDark);

.dark {  filter: invert(1);  background: black;}

<body>  <h1>Hello World</h1>  <a href="#" id="invert">Hover me!</a><br><br>  <img src="https://www.gravatar.com/avatar/"></body>

How to invert colors using CSS on hover

Your original background shorthand uses a gradient which is interpreted as a background-image and so your hover declaration does not override that property.

.ryanAddButton {  display: inline-block;  padding: 8px 0px;  width: 390px;  /*background:    -moz-linear-gradient(#000, #000);background:    -o-linear-gradient(#000, #000);background:    -webkit-linear-gradient(#000, #000);background:    linear-gradient(#000, #000);    */  background: black;  color: #fff;  font: normal 700 20px/1"Calibri", sans-serif;  text-align: center;  text-shadow: 1px 1px 0 #000;}.ryanAddButton:hover {  background-color: white;  color: black;}

<p class="ryanAddButton">Add to Cart</p>

CSS Invert colors in transparent svg element

One way of achieving the required result is close to the code given in the question.

The color of the text in the p element is inverted so that the part lying over the circle has the color cyan. The background of the element containing the p and svg (in this snippet's case, the body) has a background of white set so the mix-blend-mode on the text takes the difference of the color (which is now #00ffff = cyan) and white (#ffffff) to take us back to red (#ff0000).

As noted in comments, it's not possible to invert the SVG circle color as it has transparency so will always have that whatever RGB it has inverted so it's filled with a solid color.

body {
  background: white;
  height: 100vh;
}

.cursor {
  position: absolute;
  top: 0;
  left: 0;
}

.cursor__inner {
  fill: black;
}

p {
  color: cyan;
  color: red;
  filter: invert(1);
  mix-blend-mode: difference;
}

<body>
  <svg class="cursor" width="64" height="64" viewBox="0 0 64 64">
      <circle class="cursor__inner" cx="32" cy="32" r="32" />
    </svg>
  <p>Hello World!</p>
</body>

Invert color of a page

Your solution:

document.body.style.filer = "invert(100%)";
Object.values(document.body.getElementsByTagName("*")).forEach(e => {
    e.style.filter = "invert(100%)"
});

didn't really work because you're inverting colours from parent elements and their children. Inverting twice causes the element to have the original colour. Therefore, you only need to invert the colour of the parent(s) (in this case, the html, which is the root of everything):

document.querySelector('html').style.filter = 'invert(100%)'

And every colour will be inverted. Note that if you try to use this on a colourless element, nothing will change, i.e. if you try this script on this page, you will notice that the div on the left side of this page with the id left-sidebar will not change in colour. This is due to the sidebar not having any colour (the middle section and right sidebar is inverted because they're inside the div#content which has white background colour).

However, if you add background (e.g. white) to the left side bar, it will also invert its colour.

Invert colors inside selection

I cannot see how to do this in a complex case, where the selection contains several HTML elements that might be setting color and background color individually (though of course some complex HTML/CSS parsing must be able to do that but I'm not capable).

However, we can fairly simply deal with the straightforward case where the color and background color are consistent across the parent div of the selection.

On a selection event this snippet reads the computed style of the parent element, calculates the inverse of the color and backgroundColor and sets CSS variables to these which are picked up and used in the selection pseudo element.

document.addEventListener('selectionchange', (e) => {
  function invert(color) {
    color = color.replace('rgb(', '');
    color = color.replace(')', '');
    color = color.replace('rgba(', '');
    let colors = color.split(',');
    let r = colors[0].replace(' ', '');
    let g = colors[1].replace(' ', '');
    let b = colors[2].replace(' ', '');
    let a = (colors.length > 3) ? colors[3].replace(' ', '') : 1;
    r = ~r & 255;
    g = ~g & 255;
    b = ~b & 255;
    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
  }
  selection = window.getSelection();
  if (selection.anchorNode) {
    const parent = selection.anchorNode.parentElement;
    const style = window.getComputedStyle(parent);
    parent.style.setProperty('--color', invert(style.color));
    parent.style.setProperty('--background-color', invert(style.backgroundColor));
  }
});

.invertSelectionColors::selection {
  color: var(--color);
  background-color: var(--background-color);
}

<div class="invertSelectionColors" style="background-color: cyan;color:#000000;">
  here is some text originally background color cyan and color #000000
</div>
<div class="invertSelectionColors" style="background-color: rgba(255, 0, 0, 0.5);color:#0000ffff;">
  here is some text originally background color rgba(255, 0, 0, 0.5) and color #0000ffff
</div>

Invert Button colors on hover using JavaScript & CSS

Try to set invert value to 1 instead of button

.invertedButton {
  filter: invert(1);
}

and try to use mouseenter instead mouseover because mouseover is triggered many times while mouseenter is triggered only once when cursor gets over button

invertLink.addEventListener('mouseover', toggleDark);

Solution using css only

.button:hover{
  filter: invert(1);
}