141

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?

5
  • 3
    -webkit-filter: invert(100%);
    – daniel__
    Commented Jul 19, 2013 at 8:42
  • 1
    This could be very helpfull to you: net.tutsplus.com/tutorials/html-css-techniques/… Commented Jul 19, 2013 at 9:02
  • 3
    In this fiddle 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 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. Commented Jul 19, 2013 at 9:18
  • @Ronvander the link is dead Commented Apr 1, 2021 at 18:33
  • 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. Commented Nov 2, 2022 at 20:47

4 Answers 4

194

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>

1
  • 3
    This inverts the color, but not the background. It just so happens that color is set to the same as background-color. See below for a solution that inverts the backdrop.
    – P Varga
    Commented Oct 20, 2019 at 20:41
54

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>

3
  • 7
    +1 mix-blend-mode: difference works where filter: invert(100%) fails when used with position: fixed (say modals) stackoverflow.com/a/37953806/366332 Commented Apr 15, 2020 at 17:41
  • Doesn't work on economist.com. html {mix-blend-mode: difference !important;} does not invert the background. (neither does html {filter: invert(100%) !important;})
    – tejasvi
    Commented Mar 4, 2022 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
    Commented Jan 19, 2023 at 3:21
1

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

Try this Invert text color of a specific element

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

0
1

I know this is an old question, but if you are wanting to invert the whole p and not just the colour, then the new way to do it is to use backdrop-filter

div {
  background-color: #f00;
  padding: 2px;
}

p {
  color: #f00;
  backdrop-filter: invert(100%);
}
<div>
  <p>inverted color</p>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.