Two-tone box?

[D3mon]

Can I make a box (div) have a background with top half one colour and bottom half another colour, with just CSS? I’m, usually OK with CSS, but this one has got me…

[Billy]

You could use a gradient:
example:

background: -webkit-linear-gradient(top, #333333, #333333 49%, #666666 50%, #666666);

This is for Safari 5+ and Chrome 10+. For older versions, the code is longer. Just change the “webkit” into “ms” (IE), “mod” (Firefox) or “o” (Opera).

[chrisburton]

With CSS gradients you can.

Edit: Wow huge delay in rendering this comment.

[rch]

Try this for making de gradient:
colorzilla gradients

[chrisburton]

@cynewatch meant -moz- for Gecko browsers.

[D3mon]

Fantastic, thanks guys. I’d had a feeling that it would be a gradient but wasn’t sure I could get a perfect line between the two colours instead of a slight blur. I’ll give it a go. :D

[sahotaT]

m not sure in which browsers this will work (worked for me Mozilla, Chrome and IE8) but check this out using pseudo elements :after and :before in case you want only hard colors
http://jsfiddle.net/3jakp/4/

[joshuanhibbert]

@cyneWATCH You would use this for best results:

background-image: linear-gradient(#333 0%, #333 50%, #666 50%, #666 100%);

[Mottie]

Ultimate CSS Gradient Generator

[Author]

Posts