Mohammad Mohammad - 2 months ago 20
CSS Question

How to make nested colors in one div background?

How I can put multiple nested colors (or 2 colors precisely) to a div in css?
If it's possible to do that, how I can specify the nesting form, as percentage of each color, position, etc?

I mean the gradients, to make a background like this:

enter image description here

Answer Source

You can do a 50/50 background if that's what you mean, using gradient, e.g.:

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#000000), color-stop(50%,#333));

Or for a full gradient, e.g.:

-webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#000ed8)); 

Which is pretty straight forward, you just have to add the start and finish color. Also, I'm saving space above but you should of course use -o-linear-gradient, -ms-linear-gradient, linear-gradient as well if you want to be supported on all browsers).

There are also tools available to help you out:

http://www.colorzilla.com/gradient-editor/