Linear Gradient Inside Another Linear Gradient

I'm trying to create a linear gradient within another linear gradient, is it possible ? example below background: linear-gradient(to right, #color1 50%, #color2 0%) color 1 is bac

Solution 1:

Simply adjust the background-position/background-size using multiple background. Basically each gradient will be half width and full height.

body {
  margin:0;
  height:100vh;
  background: 
   linear-gradient(#aa0507,#e0171e,#aa0507) right/50%100%,
   linear-gradient(#f4c05b,#fcd580,#f4c05b) left /52%100%; /*we can make this a little bigger to avoid the blank space*/background-repeat:no-repeat;
}

Solution 2:

You can combine the two gradients into background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507) to get the effect - note that the gradients on the both left / right sections are left to right in this answer.

See demo below:

body {
  background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b50%, #aa050750%, #e0171e, #aa0507);
}