Beispiel:CSS-conic-gradient-1.html

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" > <title>conic-gradient()</title> <style> .conic-gradient-sw {

 background: conic-gradient(black, #fff, #000);

} .conic-gradient1 {

 background: conic-gradient(red, orange, yellow, lime, aqua, blue, magenta, red);

}

.farbkreis {

 background: radial-gradient(white 30%, transparent 31%), conic-gradient(#c32e04 22deg, #df6c20 0 67deg, #dfac20 0 112deg, #8db243 0 157deg, hsl(85 100% 30%)  0 202deg, #306f91 0 247deg, #9357b9  0 292deg, #660033 0 337deg,#c32e04 0);

} .sunbeam { background: conic-gradient(from 0.25turn at 20% 50%, #dfac20, 10deg, #306f91, 350deg, #e6f2f7);

 border-radius: 0;
}

.squares {

 background: conic-gradient(#c32e04 90deg, #dfac20 0 180deg, #306f91 0 270deg, #5a9900 0);
 border-radius: 0;

}

.prism {

 background: conic-gradient(at 0% 30%, #c32e04 10%, yellow 30%, #306f91 50%);
   border-radius: 0;

} div { height: 7em; aspect-ratio: 1; margin: 0 auto 1em; border-radius: 50%; border: thin solid; }

figure { width: 100%; }

body { display: grid; grid-template-columns: repeat(auto-fill, 10em); gap: .5em; } h1 {grid-column: 1/-1; } </style> </head> <body>

conic-gradient() - gewinkelte Farbverläufe

<figure>

<figcaption>Kreis mit konischem SW-Verlauf</figcaption> </figure> <figure>

<figcaption>konischer Farbverlauf mit weichen Übergängen</figcaption> </figure> <figure>

<figcaption>Farbkreis mit 8 Segmenten
harten Übergängen und einem Loch in der Mitte (Donut)</figcaption> </figure> <figure>

<figcaption>Wer sagt, das das Element rund sein muss?</figcaption> </figure> <figure>

<figcaption>Strahlen durch ein Prisma; Zentrum ist 0 30%</figcaption> </figure> <figure>

<figcaption>Riss im Himmel</figcaption> </figure>

</body> </html>