Combining Background Color And Gradient In One Background CSS Attribute

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 parameters being specif

Solution 1:

linear-gradient() is like url(), an image (background-image). In the shorthand syntax, color is aside the image (background-color) <edit> multiple gradient can be set and animate via background-size:

div {
  width: 400px;
  height: 200px;
  border: 1px solid gray;   
  background:linear-gradient(to top,red,red) no-repeat, linear-gradient(to right,black, white) no-repeat  100% 0 tomato; 
  background-size: 20% auto, 80% auto;
  animation: animate 4s infinite alternate;
}
@keyframes animate {
from {  background-size: 20% auto, 80% auto;}
30% {  background-size: 10% auto, 10% auto;}
90%, to {  background-size: 70% auto, 30% auto;}
}

<div>

</div>

---

Note that , red can be included into the gradient instead the use of background-color: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

The linear-gradient() CSS function creates a linear, progressive transition between two or more colors. Its result is an object of the <gradient> data type, which is a special kind of <image>.

div {
  width: 400px;
  height: 200px;
  border: 1px solid gray; 
  background: linear-gradient(to right, red 70%,black 70%, white) ;
}

<div>

</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/background

The CSS background shorthand property lets you adjust all of the available background style options at once, including color image, origin and size, repeat method, and other features. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

Solution 2:

However, Chrome says the background property has an invalid value [...] I fail to understand why.

A color value can only appear in the last layer in an element with layered backgrounds, as stated in the spec. You are specifying a color in a layer other than the last, which renders your shorthand declaration invalid.

My current work-around, which I cannot believe to be really necessary here, is to wrap the solid color in a gradient with the same start and end color. Kind of ugly, and I am sure there is a simpler way...

There isn't. That's the only pure CSS workaround. You could instead opt for a Base64-encoded data URI representing a single red pixel, but either way, you're going to have to specify an image value if that solid color must overlap the gradient.

Solution 3:

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

<div>
<!-- this one will be red and fade to black -->
</div>

<div style="background-color:blue">
<!-- this one will be blue and fade to black -->
</div>