Multiple background color for div

css, html, javascript

Solution

You can use CSS3 Gradients[1] to achieve such effect

div {
    background: linear-gradient(to right,  #ff3236 0%,#ff3033 32%,#3e30ff 32%,#3e30ff 63%,#33ff30 63%,#33ff30 100%);
    height: 400px;
}

Demo

You can create such gradients over here

You can also use `px` as a unit, along with `%` if you are looking for static gradient widths

Demo (Please add `browser-prefixes` if you are looking for a cross browser solution, I've not added all the rules in this demo)

Demo 2 (Vertical Split, just change `to right` to `to bottom`)

1. More on CSS3 Gradients 2. Browser Support

Problem

I have a `div` ``` <div class="test"> Some text </div> ``` I would like to have different background color for the same `div` by percent (Horizontal coloring) ``` ----------------------------- | 20% | 30% | 50% | | Red | Yellow | Green | ----------------------------- ``` Is this possible with CSS?

Original source