How can I invert color using CSS?

Question

HTML

    
inverted color

CSS

div {
    background-color: #f00;
}
p { 
    color:         


        

Answer 1

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;
}

  
Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do