Конический градиент с линейными градиентами как запасной вариант

Question

Есть ли способ установить фон с коническим градиентом, который из-за отсутствия поддержки будет иметь регулярный линейный градиент, как запасной вариант в Firefox, IE, Safari и т. Д.?В любом случае, когда я пытаюсь это настроить, линейный градиент переопределяет коническое в Chrome.

Answer 1

Обратите внимание, что это должно было быть ошибкой в ​​предыдущей версии Chrome, с сегодняшней версией v.75 простое и ожидаемое каскадирование прекрасно работает в Chrome и корректно работает в браузерах без поддержки:

.box {
  width: 300px;
  height: 200px;
  background: linear-gradient(red, blue);
  background: conic-gradient(red, blue, red); 
  position: relative;
  z-index: 0;
}

<div class="box">

</div>

Answer 2

Одна идея - рассмотреть 2 слоя.Вы делаете нижний слой linear-gradient, а затем рассматриваете другой слой над ним с псевдоэлементом для конического градиента.Если последний упадет, вы увидите только linear-gradient.Если нет, то он будет охватывать linear-gradient.

. Приведенный ниже код покажет конический градиент на Chrome и линейный градиент на Firefox:

.box {
  width: 300px;
  height: 200px;
  background: linear-gradient(red, blue);
  position: relative;
  z-index: 0;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: conic-gradient(red, blue, red);
}

<div class="box">

</div>