How can I invert color using CSS?

CssColors

Css Problem Overview

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?

Css Solutions

Solution 1 - 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>

Solution 2 - Css

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>

Solution 3 - Css

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.

Categories
Recommended Css Solutions
Recommended Colors Solutions

Previous Solution:

Get position of UIView in respect to its superview's superview

IphoneIosUiviewUibuttonCgrect

Next Solution:

Why does this method print 4?

JavaJvmStack Overflow

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBhojendra RauniyarView Question on Stackoverflow
Solution 1 - CssBruno LemosView Answer on Stackoverflow
Solution 2 - CssᅙᄉᅙView Answer on Stackoverflow
Solution 3 - CssJan PeterView Answer on Stackoverflow