WoJ WoJ - 24 days ago 7
CSS Question

Is it possible to mix gradients with solid colors?

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
div
width) 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

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>

Comments