Only colour half a div with CSS gradients - html

Question

is it possible to colour only half a div white from the left and the other side green? I want to do this on the 19th date in this graphic
td.specialDate:first-of-type {
background-image: linear-gradient(left, lightgreen, lightgreen 50%, transparent 50%, transparent 100%);
background-image: -webkit-linear-gradient(left, lightgreen, lightgreen 50%, transparent 50%, transparent 100%);
}

Answer 1

try something like this:
background: green;
background: -moz-linear-gradient(left, green 0%, white 50%);
background: -webkit-linear-gradient(left, green 0%, white 50%);
background: linear-gradient(to right, green 0%, white 50%);
Here a link to a code sample on CodePen
You can go crazy with gradients on this nice website
EDIT
If you want to color exactly half of the div, w/o the shade/gradient, use this code:
background: green;
background: -moz-linear-gradient(left, green 50%, white 50%);
background: -webkit-linear-gradient(left, green 50%, white 50%);
background: linear-gradient(to right, green 50%, white 50%);
if you want a diagonal from bottom left to top right, use this code:
background: green;
background: -moz-linear-gradient(45deg, green 50%, white 50%);
background: -webkit-linear-gradient(45deg, green 50%, white 50%);
background: linear-gradient(45deg, green 50%, white 50%);
Check the linked Codepen sample for the updated code sample.

Answer 2

Yes, and you're not too far off with the gradient:
html, body {
width:100%;
height:100%;
}
div {
width:100%;
height:100%;
}
div {
background: linear-gradient(to left, lightgreen 50%, transparent 50%);
}
<div>
</div>
And here's a Fiddle as well.

Answer 3

Check this code.
background: -moz-linear-gradient(left, #ffffff 50%, #0f0 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 50%,#0f0 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 50%,#0f0 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
JSFIDDLE

Answer 4

Use this in CSS:
div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
to right,
red,
red 50%,
green 50%,
green 100%
);
}

Answer 5

Yes it is possible.
Here it is . You can copy the code by clicking "Copy Text" below. It's too long to post here.
I hope it helps.