<div class="container">
    <div class="rainbow"></div>
    <div class="colors"></div>
</div>
$rainbows: (red, orange, yellow, green, teal, blue, purple);
$colors: ();
$totalStops:20;

@for $i from 0 through $totalStops{
    $colors: append($colors, hsl($i *(360deg/$totalStops), 100%, 50%), comma);
}

.rainbow {
    width: 200px;
    height: 200px;
    background: conic-gradient($rainbows);
    border-radius: 50%;
}

.colors {
    width: 200px;
    height: 200px;
    background: conic-gradient($colors);
    border-radius: 50%;
}

.rainbow,
.colors {
    float: left;
    margin: 20px;
}

.container {
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js
  2. //leaverou.github.io/conic-gradient/conic-gradient.js