How can I invert color using CSS?

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?

3 Answers

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>

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>

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.