Conic-gradient with linear gradients as fallback

Question

Is there any way to set up a conic-gradient background that would, due to lack of support, have a regular linear gradient as fallback in Firefox, IE, Safari, etc.? Any way I try to set this up, the linear gradient overrides the conic in Chrome.

Answer 1

One idea is to consider 2 layers. You make the bottom layer a linear-gradient then you consider another one above it with a pseudo element for the conic gradient. If the last one will fall you will only see the linear-gradient. If not it will cover the linear-gradient.

The below code will show a conic gradient on Chrome and linear gradient on 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>

Answer 2

Note that that must have been a bug in a previous version of Chrome, with today's v.75 the simple and expected cascading works perfectly in Chrome and fallbacks correctly in browsers with no support:

.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>