JSFiddle - React, Tailwind, and code Playground

by riaanc

HTML

<div class="fallback box">
    If you can read<br>this, your browser<br>doesn't support<br>conic-gradient yet.
</div>
<div class="colorwheel box"></div>

CSS

It's doable now - at least in Chrome. The CSS property conic-gradient can easily achieve this:

html, body { margin: 0; padding: 0; }
.box {
    position: absolute;
    width: 1200px;
    height: 1200px;
    left: 100px;
}
.colorwheel {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    border-radius:50%;
}
.fallback {
    text-align: center;
    padding: 50px 0;
}