Combining background color and gradient in one background CSS attribute

Question

I\'d like to combine a solid color and a gradient in a single background CSS attribute. Then, I want these two backgrounds to have separate size and position parame

Answer 1

setting a background gradient will be overlayed over the background color. so if you want only 70% of the screen to be red, you'll need to include it in the gradient as you did.

the reason why your property was not rendered in your js fiddle is because you had a comma separating the different parts of the backround shorthand property. so if you did want for overlay your gradient over the background you need to remove the comma:

div {

/* other properties of the div here */

background: red linear-gradient(to right, transparent 0%, transparent 70%, rgb(0,0,0) 70%,rgb(255,255,255) 100%);

}

https://jsfiddle.net/0orbjebm/

if you wanted the gradient tinted by the overlay, just add transparency. this is nice if you just want to great to have a gradient that you can overlay with transparency (i altered the sequence just for aesthetic sense

div {

  /* other properties of the div here */

  background: red linear-gradient(to right, transparent 0%, transparent 70%, rgba(0,0,0,1) 100%);

}

https://jsfiddle.net/tootz4w8/

in that above example i added a div and added an inline style property for the background color in the div itself and you can see we get nice effects