Invert Colors Using CSS

By  on  

I've been obsessed lately with finding new or lesser known CSS properties and values and playing around when them.  Some of them are quite useful and others are seemingly only for a giggle.  CSS filters fall in the useful department:  grayscale, blur, sepia -- all common filters.  But how about invert?  And did you know you can invert the color of every element on a page?

The CSS

The invert value is percentage-based; 100% fully inverts the colors and 0% displays all colors as normal:

.normal {
	filter: invert(0%);
}

.inverted {
	filter: invert(100%);
}

You can invert individual elements or, if you invert the document.documentElement, the entire page contents get inverted.  The values reported back by window.getComputedStyle(el) will be the original CSS values, however, so there's no way of getting the true inverted values of given properties.

Color inversion is a useful accessibility tool, though it is oftentimes provided by the user's operating system or a separate tool.  I can see inversion being helpful at night, easing eye strain when looking at screens.  Can you think of a good use of color inversion?  Please share!

Recent Features

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Highlighter: A MooTools Search & Highlight Plugin

    Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The...

  • By
    Resize an Image Using Canvas, Drag and Drop and the File API

    Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...

Discussion

  1. Interesting to see that a percentage is supported, I wouldn’t have expected that. Try inverting at 50% to see why.

    The upside of this is that values between 0 and 50% could be used for the purpose of desaturation.

    • Welp – that’s half inverted… so a percentage still makes sense it seems to me! :)

  2. Actually, I can think of a good use case for this: “night mode” for reading in low-light situations.

    I often use the inverted display mode of my iPhone when reading articles at bedtime. What’s annoying is that, of course, all the images invert, and I have to toggle (blast of light!) back for a moment to view the image.

    What would be useful, is to have a button for inverting the page *except* for the images. They could be dimmed as well (using opacity or some other filter).

    It’s probably not a huge use case, but it would be awesome if the browser could somehow detect if the device was in ‘inverted mode’.

    • Roy

      You can invert the entire page (body) and then invert the images back! E.g.:

      body {
          filter: invert(100%);
      },
      img: {
          filter: invert(100%);
      }
      
  3. Harrald

    Awesome! Didn’t knew that one. It also works on iOS 8 btw. So not only on the nightlies.

  4. I have tried this in one of my projet, it works well for chrome and firefox but it does NOT work in IE 10 and safari. Any solution for this ?

  5. Elixor

    I was thinking of inverting white or light colored logos (with a transparent background) for printing purposes!

  6. rickdog

    do you know of a way to color an object to be the reverse of it’s z-order underlying elements.
    For example, when drawing an black AOI box with black lines on top of a black background, the lines can’t be seen.

  7. This could be used to achieve a “night mode” effect on web pages but without affecting images (thumbnails and logo), videos, ad banners etc. Stuff like:

    body.invert:not(img) {
      ...invert code here...
    }
    
    • In macOS, when the Invert Colors setting is on, Pinterest’s desktop site inverts only the colors of the interface and not the images. How does it do that? How can a site know that the Invert Colors accessibility setting is turned on in the visitor’s operating system? And how could this have been done better? I.e. how can the site keep the Pinterest logo non-inverted as well? Thanks very much.

    • Jay

      probably it doesn’t ‘know’ – I’m guessing an invert(0%) !important is preventing the browser from inverting the images? I haven’t looked at their code though.

    • Hi! I wanted to use a button named “Night Mode” to revert colors on my website, but how do I do to link the CSS code to invert colors entered after the tag of my blog and this “Night Mode” HTML-made button? Thanks for your help ♥ :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!