<p>If your browser supports conic-gradient, you see a green/orange cone. If not a blue linear gradient.</p>

<div class="test">
  
</div>
* {
  box-sizing: border-box;
}

body {
  padding: 40px;
  background-color: #fff;
  color: #333;
  font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
  margin: 0;
}

 .test {
    width: 200px;
  height: 200px;
  background: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
  border-radius: 50%;
  margin: 20px;
  }

@supports (background: conic-gradient(orange, green, orange)) {
  .test {

  background: conic-gradient(orange, green, orange);

  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.