revision:
The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).
Syntax: background image: conic-gradient(color degree, color degree, ...);
Conic gradients are similar to radial gradients, except that the color stops are on the outer edge of the circle that gets created. The conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc - the circumference of a circle - rather than on the gradient line emerging from the center of the gradient.
With conic gradients, the colors transition as if spun around the center of a circle, starting at the top and going clockwise. In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions.
A repeating conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Like non-repeating conic gradients, the color-stops of a repeating conic gradient are specified with an <angle>. Units include "deg" for degrees, "grad" for gradients, "rad" for radians, and "turn" for turns.
Example conic gradients include pie charts and color wheels.
A conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to, or size of the <image> is set to something other than the element size. To create a conic gradient that repeats so as to fill a 360 degree rotation, use the repeating-conic-gradient() function instead. Because "gradients" belong to the "image data type", they can only be used where "images can be used. For this reason, conic-gradient() won't work on background-color and other properties that use the "color data type".
A conic gradient rotated 45 degrees, starting blue and finishing red: conic-gradient(from 45deg, blue, red);
A bluish purple box: the gradient goes from blue to red, but only the bottom right quadrant is visible, as the center of the conic gradient is at the top left corner: conic-gradient(from 90deg at 0 0, blue, red);
Colorwheel: background: conic-gradient(hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%));
angle: preceded by the "from" keyterm, and taking an angle as its value, it defines the "gradient rotation" in "clockwise direction".
position: using the same length, order and keyterm values as the "background-position property", the position defines center of the gradient. If omitted, the default value is center, meaning the gradient will be centered.
angular-color-stop: a color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axis).
color-hint: the color-hint is an "interpolation hint" defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
conic-gradient(red 40grad, 80grad, blue 360grad);
conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); background-size: 25% 25%;
<div class="ex">example: comparison
<div class="radial-gradient">radial-gradient</div>
<div class="conic-gradient">conic-gradient</div>
</div>
<style>
.radial-gradient {position: relative; background-image: radial-gradient(red, green, blue); width:10vw; height: 10vw; border-radius:50%; padding:1vw; color: red; text-align: center; }
.conic-gradient {position: relative; background-image: conic-gradient(red, green, blue); width:10vw; height: 10vw; border-radius:50%; padding: 1vw; color: red; text-align: center;}
</style>
<div class="ex">
<div class="pie-chart"></div>
<div class="pie-chart-border"></div>
<div class="pie-chart-four-colors"></div>
</div>
<style>
.pie-chart {position: relative; width: 10vw; height: 10vw;border-radius:50%; background-image: conic-gradient(#1a535c 40deg, #ff6b6b 40deg 160deg, #4ecdc4 160deg); padding: 1vw;
color: darkblue; margin: 1vw;}
.pie-chart-border {position: relative; width: 10vw; height: 10vw; border-radius:50%;background-image: conic-gradient(#1a535c 1deg 60deg, #ff6b6b 60deg 120deg, #4ecdc4 120deg 220deg,
#ffe66d 220deg); padding: 1vw; color: darkblue; margin: 1vw;}
.pie-chart-border:before {content:""; position: absolute;background-color: #fff; width:10vw; height:10vw; border-radius:50%;
top:1vw; left:1vw;}
.pie-chart-four-colors {position: relative; width: 10vw; height: 10vw;border-radius:50%; background-image: conic-gradient(#4ecdc4 25%, #1a535c 0 50%, #ffe66d 0 75%, #ff6b6b 0);
padding: 1vw; color: darkblue; margin: 1vw;}
</style>
<div class="ex">
<div class="starburst"></div>
</div>
<style>
.starburst {position: relative; width:20vw; height: 20vw; margin-left: 4vw; background: repeating-conic-gradient(#ffdd00 0 18deg, #ffc300 0 36deg);}
</style>
<div class="ex">
<div class="fourty">40 degrees</div>
<div class="fifty">50 degrees</div>
<div class="sixty">60 degrees</div>
<div class="ninety">90 degrees</div>
<div class="onethirty">130 degrees</div>
</div>
<style>
.grid_D{display: grid; grid-template-columns: repeat(5, 1fr); color: white;}
.fourty{width: 8vw; height: 8vw; background-image:conic-gradient(from 40deg, #fff, #000);margin-left: 1vw;}
.fifty{width: 8vw; height: 8vw; background-image:conic-gradient(from 50deg, #fff, #000);margin-left: 1vw;}
.sixty{width: 8vw; height: 8vw; background-image:conic-gradient(from 60deg, #fff, #000);margin-left: 1vw;}
.ninety{width: 8vw; height: 8vw; background-image:conic-gradient(from 90deg, #fff, #000);margin-left: 1vw;}
.onethirty{width: 8vw; height: 8vw; background-image:conic-gradient(from 130deg, #fff, #000);margin-left: 1vw;}
</style>
< div class="ex">
<div class="off-one">off 25%</div>
<div class="off-two">off 50%</div>
<div class="off-three">off 100%</div>
</div>
<style>
.off-one{width: 10vw; height: 10vw; background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); margin-left: 1vw;}
.off-two{width: 10vw; height: 10vw; background: conic-gradient(from 0deg at 0% 50%, blue, green, yellow 180deg); margin-left: 1vw;}
.off-three{width: 10vw; height: 10vw; background: conic-gradient(from 0deg at 0% 100%, blue, green, yellow 180deg); margin-left: 1vw;}
</style>
<div class="ex">
<div class="syntax-one">smooth</div>
<div class="syntax-two">hard stops</div>
<div class="syntax-three">from keyword</div>
<div class="syntax-four">at keyword</div>
<div class="syntax-five">repeating</div>
</div>
<style>
.grid_D{display: grid; grid-template-columns: repeat(5, 1fr); color: white;}
.syntax-one{width: 10vw; height: 10vw; background: conic-gradient(cyan, magenta, yellow, black);margin-left: 1vw;}
.syntax-two{width: 10vw; height: 10vw; background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0); margin-left: 1vw;}
.syntax-three{width: 10vw; height: 10vw; background: conic-gradient(from 45deg, cyan, magenta, yellow); margin-left: 1vw;}
.syntax-four{width: 10vw; height: 10vw; background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow); margin-left: 1vw;}
.syntax-five{width: 10vw; height: 10vw; background: repeating-conic-gradient(red 10%, #4AAE9B 20%); margin-left: 1vw;}
</style>
<div class="ex">
<div class="board-one">checkerboard</div>
<div class="board-two">checkerboard</div>
<div class="board-three">board</div>
</div>
<style>
.board-one{width: 16vw; height: 16vw; border:0.58vw solid #000; background: conic-gradient(black 25%, white 0 50%, black 0 75%, white 0); background-size: 4vw 4vw; margin-left: 1vw;}
.board-two{width: 16vw; height: 16vw; border:0.58vw solid #000; background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat;
border: 0.3vw solid; margin-left: 1vw;}
.board-three{width: 16vw; height: 16vw; border:0.58vw solid #000; background: conic-gradient(#fff 0.25turn, #bbb 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #bbb 0.75turn) top left / 10% 10% repeat;
outline: 1px solid;margin-left: 1vw;}
</style>
<h4>gradient color generator</h4>
<b style="margin-left: 3vw;">current colors for gradient background:</b>
<input class="color1" type="color" value="#0000ff" />
<input class="color2" type="color" value="#add8e6" />
<script>
let css = document.querySelector("h4");
let color_1 = document.querySelector(".color1");
let color_2 = document.querySelector(".color2");
let body = document.querySelector(".change");
function changeGradient() {
body.style.background = "linear-gradient(to right, " + color_1.value + ", " +
color_2.value + ")";
css.textContent = body.style.background + ";";
}
color_1.addEventListener("input", changeGradient);
color_2.addEventListener("input", changeGradient);
</script>
<div id="test">
<h4 id="first">gradient color generator</h4>
<b>current colors for gradient background:</b>
<input class="color3" type="color" value="#0000ff" />
<input class="color4" type="color" value="#add8e6" />
</div>
<script>
let cssA = document.querySelector("#first");
let color_3 = document.querySelector(".color3");
let color_4 = document.querySelector(".color4");
let div = document.querySelector("#test");
function changeDivGradient() {
document.getElementById("test").style.background = "repeating-radial-gradient(at top, "
+ color_3.value + ", " + color_4.value + ")";
cssA.textContent = document.getElementById("test").style.background + ";";
}
color_3.addEventListener("input", changeDivGradient);
color_4.addEventListener("input", changeDivGradient);
</script>
<canvas id="canvas"></canvas>
<script>
let canvas = document.getElementById("canvas");
if (canvas.getContext) {
let ctx = canvas.getContext("2d");
let gradient = ctx.createLinearGradient(10, 0, 500, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(15 / 96, 'orange');
gradient.addColorStop(30 / 96, 'yellow');
gradient.addColorStop(45 / 96, 'green');
gradient.addColorStop(60 / 96, 'blue');
gradient.addColorStop(75 / 96, 'indigo');
gradient.addColorStop(1, 'violet');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 75);
}
</script>