Линейный градиент внутри другого линейного градиента

Question

Я пытаюсь создать линейный градиент внутри другого линейного градиента, это возможно? пример ниже

background: linear-gradient(to right, #color1 50%, #color2 0%)

цвет 1

background: linear-gradient(#aa0507,#e0171e,#aa0507);

цвет 2

background: linear-gradient(#f4c05b,#fcd580,#f4c05b);

конечный результат должен быть таким

htt ps://stackru.com/images/f736a3c5ab9cc774865a4dea2a67ba594f5508b4.jpg

Answer 1

Вы можете объединить два градиента в background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507) чтобы получить эффект - обратите внимание, что в этом ответе градиенты в обеих левых / правых секциях слева направо.

Смотрите демо ниже:

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

Answer 2

Просто настройте background-position / background-size используя несколько фонов. В основном каждый градиент будет половинной ширины и полной высоты.

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;
}