How can I invert color using CSS?

Question

HTML

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

CSS

div {
    background-color: #f00;
}
p { 
    color: /* how to use inverted color here in relation with div background ? */
}

Is there any way to invert the p color with CSS?

There is color: transparent; why not color: invert; even in CSS3?

This could be very helpfull to you: http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/ — Ron van der Heijden, Jul 19 '13 at 09:02
In [this fiddle](http://jsfiddle.net/g5UHM/2/) I tried to combine 3 approaches: CSS filter for WebKit, SVG filter for Firefox, and the brilliant trick with `outline-color: invert` [invented by Lea Verou](http://lea.verou.me/2011/04/invert-a-whole-webpage-with-css-only/) for IE. Unfortunately, Opera (Presto) didn't clip the area filled with outline by `overflow`, so it won't work there. I hope that this demo may still be useful for the further experiments. — Ilya Streltsyn, Jul 19 '13 at 09:18
This is why I find it insane to not just embed the information. The only real advantage of making the link is in the form of SEO backlink credit, which also would be useless if the link expired. — easleyfixed, Nov 02 '22 at 20:47

score 179 · Accepted Answer · edited Aug 22 '19 at 13:16

179

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>

edited Aug 22 '19 at 13:16

TylerH

answered Jan 14 '14 at 04:32

Bruno Lemos

2

This inverts the `color`, but not the `background`. It just so happens that `color` is set to the same as `background-color`. See [below](/a/58460326/579078) for a solution that inverts the backdrop. – P Varga Oct 20 '19 at 20:41

score 45 · Answer 2 · answered Oct 19 '19 at 03:40

45

Here is a different approach using mix-blend-mode: difference, that will actually invert whatever the background is, not just a single colour:

div {
  background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
}
p {
  color: white;
  mix-blend-mode: difference;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>
</div>

answered Oct 19 '19 at 03:40

P Varga

7

+1 `mix-blend-mode: difference` works where `filter: invert(100%)` fails when used with `position: fixed` (say modals) https://stackoverflow.com/a/37953806/366332 – Vanni Totaro Apr 15 '20 at 17:41
Doesn't work on [economist.com](https://www.economist.com/). `html {mix-blend-mode: difference !important;}` does not invert the background. (neither does `html {filter: invert(100%) !important;}`) – tejasvi88 Mar 04 '22 at 12:10
@tejasvi88 `mix-blend-mode` implies two layers will "mix" together. you must `mix-blend-mode` on a child node. in the example, `p` mixes with `div`, the effect is `p` is inverted in relation to the contents of `div` beneath it. – Mulan Jan 19 '23 at 03:21

score 2 · Answer 3 · edited Jun 20 '20 at 09:12

2

I think the only way to handle this is to use JavaScript

If you do this with css3 it's only compatible with the newest browser versions.

edited Jun 20 '20 at 09:12

Community

answered Jul 19 '13 at 08:43

Jan Peter

3 Answers3