I have two blocks (div elements) with one black on the top background-color: black and one white on the bottom.

Is it possible to have a piece of text that straddles the two zones with inverted colors?

For example: the top part of the text "FOO" will be white on black and the bottom part black over a white region.


If you mean something like this:

enter image description here

Edit: here's a way which only requires one HTML element and so won't be weird when read by non-CSS-styling clients like search engines, screen readers, RSS, 'no style' apps etc (thanks to Dominic for suggesting trying :before and :after).


The important code (add your colours to this):

HTML: <div class="someclass" data-text="Some text">Some text</div>


.someclass {     /* bottom half */
  position: relative;
  display: inline-block;

.someclass:after {     /* top half */
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0px;
  height: 50%;
  overflow: hidden;

The HTML attribute can be anything - I used data-text because it's descriptive and avoids undesirable side effects (e.g. you could use title but it would create mouseovers in some browsers).

If you want display:block; on the main (.top) element, add something like width: 100%; to the inner (.bottom) element so it fills it.

If you're using jQuery, you can apply this style to any element really easily, avoiding having to manually type out the data-text duplicated bit:


Demo of that plus some other stuff like multiple lines, padding

| improve this answer | |

Surprisingly, it is possible, though I'd only advise it if you're website is all about the visual impact and the semantics of the code don't matter, additionally it probably won't be very consistent across older browsers.

The result is:

Inverted Text

This is not a pretty solution, and I'd bet it's not the only one out there, but it does what you want.

It requires that you have two instances of the text, and using absolute positioning and some simple maths, you can create this effect.

So if we have a container div, and within that two more divs, and within each of those an instance of the text, you can use the following HTML structure and CSS properties to achieve this:

<div class="container">
    <div class="black">
       <div class="text">Invert</div>
    <div class="white">
       <div class="text">Invert</div>

.container{position:relative; width:200px; height:100px; display:block; margin:0px; padding:0px; }

.black, .white{position:absolute; left:0px; background:#000; width:200px; height:50px; margin:0px; padding:0px; overflow:hidden; }

.black{top:0px; }

.white{bottom:0px; background:#fff; }

.text{position:absolute; color:#fff; font-size:70px; padding:0px; }

.black .text{bottom:-40px; }

.white .text{top:-40px; color:#000; }

Here is a JSFiddle of the result. :)

| improve this answer | |
  • Oooh posted while I was finishing typing! Nice answer but I think there's a couple of ways it can be simplified to be more something that can be dropped in anywhere. I think there's no way to do it without duplicating text. – user56reinstatemonica8 Oct 10 '13 at 17:05

There is also a CSS3 property, only supported by webkit, that inverts colors:

image {
 -webkit-filter: invert(100%);  

And there's an HTML5 Canvas Invert, here's an example and the full code. It iterates over all of the pixels in an image and inverts red, green, and blue by subtracting each component from the max color value, 255.

Both solutions would still require 2 images and CSS positioning for them. Since compatibility is not very good, I'd definitely go for one of the other answers :)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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