<h1>Conical Gradient Demos</h1>

<div class="container">
  <div class="item">
    <div class="demo demo01"></div>
    <p>Two color conical gradient</p>
  </div>

  <div class="item">
    <div class="demo demo02"></div>
    <p>Three color conical gradient</p>
  </div>

  <div class="item">
    <div class="demo demo03"></div>
    <p>Rainbow conical gradient</p>
  </div>

  <div class="item">
    <div class="demo demo04"></div>
    <p>Three colors changing origin to 0% 50%</p>
  </div>

  <div class="item">
    <div class="demo demo05"></div>
  </div>

  <div class="item">
    <div class="demo demo06"></div>
  </div>

  <div class="item">
    <div class="demo demo07"></div>
  </div>

  <div class="item">
    <div class="demo demo08"></div>
  </div>

  <div class="item">
    <div class="demo demo09"></div>
  </div>

  <div class="item">
    <div class="demo demo10"></div>
  </div>
<!--   <div class="item">
    <div class="demo demo11"></div>
  </div>
  <div class="item">
    <div class="demo demo12"></div>
  </div>
  <div class="item">
    <div class="demo demo13"></div>
  </div>
  <div class="item">
    <div class="demo demo14"></div>
  </div>
  <div class="item">
    <div class="demo demo15"></div>
  </div> -->
</div>
body {
  font-family: "raleway", sans-serif;
  margin: 0 2em;
}

.container {
  display: flex;
  width: 80vw;
  gap: 5em;
  flex-flow: row wrap;
}

h1 {
  margin-bottom: 3rem;
}

/*
Set up the basic dimensions for each box we'll use for the demo
*/
.demo {
  /* setup to align items to center of div*/
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  border-radius: 50%;
}

.item {
  border: 5px solid black;
  margin-bottom: 2rem;
  width: min-content;
}

.item p {
  margin: 1em;
  font-size: 1.5rem;
}

.demo01 {
  background-image: conic-gradient(red, blue);
}

.demo02 {
  background: conic-gradient(#ff0000, #663399, #0000ff);
}

.demo03 {
  background: conic-gradient(red, orange, yellow, green, blue, indigo, violet);
}

/* Positioning the conic center */

.demo04 {
  background: conic-gradient(at 0% 50%, red 10%, blue 30%, hotpink 50%);
}

.demo05 {
  background: conic-gradient(at 50%, red 10%, blue 30%, rebeccapurple 60%);
}

/* Changing the angle */

.demo06 {
  background: conic-gradient(from 45deg, red 25%, blue 25%, hotpink, green);
}

.demo07 {
  background: conic-gradient(from .25turn, blue, green, red);
}

/*

*/
.demo08 {
  border-radius: 0;
  background: conic-gradient(
    black 25%,
    white 0deg 50%,
    black 0deg 75%,
    white 0deg
  );
  background-size: 50px 50px;
}

/* 
Example from https://lea.verou.me/2015/06/conical-gradients-today/
*/
.demo09 {
  background: conic-gradient(gold 40%, #f06 0);
}

.demo10 {
  background: conic-gradient(gold 40%, #f06 40% 75%, lightblue 75% 0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.