Revert a Filter Invert() CSS Rule

Revert a filter invert() CSS rule

TL;DR

You cannot revert the invert() filter by applying another invert() or a combination of other filters.

First, I am going to start with a basic example and an explanation: the invert() filter is used to invert the colors by specifying the percentage of the inversion (or a value from 0 to 1). If we use the value 1 we invert completely the colors thus it's easy to get back to initial state as we simply have to apply the same invert again:

.container { display:flex; justify-content:space-around;}
.inner {  height: 200px;  width: 200px;  background:   linear-gradient(to right, rgb(255,0,0) 50%, rgb(0,255,255) 0) 0 0/100% 50% no-repeat,     linear-gradient(to right, rgb(50,0,60) 50%, rgb(205,255,195) 0) 0 100%/100% 50% no-repeat;}

<div class="container" style="filter:invert(1)">  <div class="inner"></div>  <div class="inner" style="filter:invert(1)"></div></div>

Remove CSS filter on child elements

You can't do it that way. Childs are affected by their parent style.

That's how Cascading Style Sheets works.

I suggest you to use a pseudo-element to make it work like you want, so that only the pseudo-element would be affected.

See comments in the snippet:

.main {  position: relative;   /* Added */  width: 300px;  height: 300px;  list-style: none;}
.main::before {   /* Added */  content: '';  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  background-color: blue;  transition: 0.5s;}
.button {  position: absolute;  top: 35%;  height: 30px;  width: 120px;  display: none;  z-index: 99;  background-color: black;  color: white;}
.icon {  width: 30px;  position: absolute;  z-index: 99;  display: none;  width: 100px;}
.main:hover>.button {  display: block;  /* filter: none; Commented */}
.main:hover>.icon {  display: block;  /* filter: none; Commented */}
.main:hover::before {   /* Modified */  filter: brightness(50%);}

<li class="main">  <img src="https://help.seesaw.me/hc/en-us/article_attachments/204081043/bear.png" class="icon" />  <a class="button" href="#">Button</a></li>

css body filter invert not working for pseudo selector

You are missing space on the descendant selector so body:not(img) is equivalent to body and it's applying for the body tag itself.

.aaa {  width: 100px;  height: 100px;  background: #00a3fe;  margin: 5px}body :not(img) {/*--^^^----*/  filter: invert(90%)}

<div class="aaa">
</div><div class="aaa">
</div>
<img src="http://pngimg.com/uploads/birds/birds_PNG115.png" />

what is the color transformation formula used by Invert() in CSS?

The formula for invert(amount) is

amount*(255-value)+(1-amount)*value

so let on 1 you get

255-value

for 0 you get

value

and for .5 you get

.5*(255-value)+(1-.5)*value
127.5-.5*value+.5*value
127.5

which will be gray because value is completely eliminated in the formula

css invert filer in Chrome

From Understanding CSS Filter Effects:

When a browser loads a web page it needs to apply styles, perform layout and then render the page so there's something to look at. Filters kick in after all those steps and just before the page is copied to the screen. What they do is take a snapshot of the rendered page as a bitmap image, then perform some graphics magic on the pixels in the snapshot and then draw the result over the top of the original page image.

You're applying a filter to the body, and the filter is applied to the whole element as a flattened image, not each child element individually, so you can't override the filter on a child like you're trying to do.

What you can do in your case is apply invert(100%) to the selector you want to show up as uninverted, because a double inverted image becomes normal again.

CSS filter:invert not working with background-color

TL;DR: Don't mess too much with `html` element.

The easy workaround is to block body's background propagation to the document's canvas, but make it take the same size as the html by removing its margin, and applying all the styles you had on html on the body, and the ones you had on the body to a wrapper <div>.

html {  /* block body's background propagation */  background: #FFF;}

/* move all one layer down */body {  filter: invert(1);  background: #fff;  padding: 50px;  /* make it cover the full canvas */  margin: 0;}.wrapper {  background-color: #0000ff;  display: flex;  align-items: center;  justify-content: center;  height: 100vh;}
.text {  text-align: center;  color: red;}

<div class="wrapper">  <div class="text">    If it works: color should not be red, background should not be blue and border should not be white  </div></div>

Why does 'filter: invert(1) hue-rotate(180deg)' turn red into a peachy-pink color?

To understand the why we need to perform some math.

If we start with the invert(1) (the easiest one) we will use f(x) = (255 - x)^ref. So
rgb(255,0,0) will become rgb(0,255,255)

For the hue-rotate(180deg) it's more complex. Considering the specification we will get the following matrix:

-0.574  1.43  0.144
 0.426  0.43  0.144
 0.426  1.43 -0.856

So we will have

R' =  -0.574*R  1.43*G  0.144*B = 1.43*255 + 0.144*255 = 401.37
G' =   0.426*R  0.43*G  0.144*B = 0.43*255 + 0.144*255 = 146.37
B' =   0.426*R  1.43*G -0.856*B = 1.43*255 - 0.856*255 = 146.37

Then a final color rgb(255,146.37,146.37) which is not a red one

html {
  background: rgb(255, 146.37, 146.37)
}

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>

Reset/remove CSS styles for element only

The CSS3 keyword initial sets the CSS3 property to the initial value as defined in the spec. The initial keyword has broad browser support except for the IE and Opera Mini families.

Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

Relevent github repo with a december 2017 more exaustive list
Related
Related from MDN
Related W3C specs

As mentioned in a comment by @user566245 :

this is correct in principle, but individual mileage may vary. For
example certain elements like textarea by default have a border,
applying this reset will render those textarea's border less.

JAVASCRIPT ?

Nobody thought about other than css to reset css? Yes?

There is that snip fully relevant : https://stackoverflow.com/a/14791113/845310

getElementsByTagName("*") will return all elements from DOM. Then you
may set styles for each element in the collection:

answered Feb 9 '13 at 20:15 by VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

With all this said; i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end.

For comparison, here is Firefox 40.0 values list for a
<blockquote style="all: unset;font-style: oblique"> where font-style: oblique triggers DOM operation.

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

Revert a Filter Invert() CSS Rule