CSS3 Linear Gradient in a circular way
This is called Conical Gradient and is not currently possible in pure CSS, but it has been proposed for the CSS Image Values 4 draft. Recently Lea Verou created a polyfill for them, there is also a PostCSS plugin that does the same.
-- Updated with information from early 2022 --
It's doable now - at least with most browsers. The CSS property conic-gradient
can easily achieve this:
html, body { margin: 0; padding: 0; }
.box {
position: absolute;
width: 200px;
height: 200px;
left: 100px;
}
.colorwheel {
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
border-radius:50%;
}
.fallback {
text-align: center;
padding: 50px 0;
}
<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>
This CSS function is specified in an editor's draft of CSS Images Module Level 4 and is currently implement by most browsers including many mobile browsers. Check Can I use for current support.