Is it possible to mix gradients with solid colors?

Question

I was reading about gradients and was wondering whether it is possible, for one given div, to mix solid and gradient colors as the CSS of its background.

I was thinking about this in the context of a bar which would represent the alternance of day and night: white for the day (50% of the div width), then a gradient from white to black (= dusk, 20% of the divwidth) and then black (30% of the div width). The percentages are just to set the context, the actual lengths would be calculated.

The documentation for gradients seems to imply that the mix is not possible, i.e. the possibility to set several stops is available, but each of them is faded into (so no solid colors).

Answer 1

You can use the following solution using the linear-gradient:

body {
  background:grey;
}
div {
  background: linear-gradient(to right, 
    white 0%, white 50%, 
    white 50%, black 70%, 
    black 70%, black 100%);
  height:200px;
  width:100%;
}

<div></div>