This collection of SCSS and CSS snippets provides various methods to generate conic gradient backgrounds for classes named .creative-x. Depending on your preferences and project needs, you can choose between SCSS for dynamic generation or direct CSS for ready-to-use styles.

ConicGradientEqualSplits.css

/* 
 * Conic Gradients Equal Splits
 * ---------------------------------------------
 * Here are a series of classes showcasing the evolution of a conic gradient.
 * Initiated from a 315-degree angle, each gradient progresses clockwise, 
 * incorporating an additional color from a predefined set.
 * 
 * These classes are perfect for those who either can't or don't wish to use SCSS.
 * To use, simply integrate the necessary classes into your stylesheet and assign them to your elements.
 */
 
 .creative-0 {
  background: #9400D3;
}

.creative-1 {
  background: conic-gradient(from 315deg, #4B0082, #9400D3);
}

.creative-2 {
  background: conic-gradient(from 315deg, #0000FF, #4B0082, #9400D3);
}

.creative-3 {
  background: conic-gradient(from 315deg, #40FF80, #0000FF, #4B0082, #9400D3);
}

.creative-4 {
  background: conic-gradient(from 315deg, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3);
}

.creative-5 {
  background: conic-gradient(from 315deg, #C0FF00, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3);
}

.creative-6 {
  background: conic-gradient(from 315deg, #FFFF00, #C0FF00, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3);
}

.creative-7 {
  background: conic-gradient(from 315deg, #FFBF00, #FFFF00, #C0FF00, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3);
}

.creative-8 {
  background: conic-gradient(from 315deg, #FF7F00, #FFBF00, #FFFF00, #C0FF00, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3);
}

.creative-9 {
  background: conic-gradient(from 315deg, #FF3F00, #FF7F00, #FFBF00, #FFFF00, #C0FF00, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3);
}

.creative-10 {
  background: conic-gradient(from 315deg, #FF0000, #FF3F00, #FF7F00, #FFBF00, #FFFF00, #C0FF00, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3);
}

ConicGradientEqualSplitsBuilder.scss

// This SCSS snippet offers a dynamic approach to generate conic gradient backgrounds
// for classes named .creative-x. Starting from a 45-degree angle and then from a 315-degree angle,
// each class accumulates more colors from the $rainbow_colors list.
// The gradient expands counter-clockwise, creating a visually pleasing progression.

// We define a list of rainbow colors, ordered from the innermost (start) to the outermost (end).

$rainbow_colors: (
  #9400D3,
  #4B0082,
  #0000FF,
  #40FF80,
  #7FFF00,
  #C0FF00,
  #FFFF00,
  #FFBF00,
  #FF7F00,
  #FF3F00,
  #FF0000
);

// For the special case of creative-0, we only need a single color background.
// This class uses the first color from the $rainbow_colors list as its background.
.creative-0 {
  background: nth($rainbow_colors, 1);
}

// Define a function that slices a list from a start to an end index.
// This function is used to get a sublist of colors from the $rainbow_colors list.
@function slice($list, $start, $end) {
  $result: ();
  // Iterate through the list from the start to the end index.
  @for $i from $start through $end {
    // Append each color to the result list.
    $result: append($result, nth($list, $i), comma);
  }
  // Return the sliced list.
  @return $result;
}

// For each subsequent color in the $rainbow_colors list, we create a new .creative-x class.
// The gradient for each class starts from 45 degrees and uses an increasing number of colors
// from the list. The newest color always appears at the top, expanding counter-clockwise.
@for $i from 2 through length($rainbow_colors) {
  .creative-#{$i - 1} {
    $gradient-colors: slice($rainbow_colors, 1, $i);
    background: conic-gradient(from 45deg, $gradient-colors...);
  }
}

// With this loop the new color is append clock wise
// Iterate through the $rainbow_colors list.
@for $i from 2 through length($rainbow_colors) {
  // For each iteration, create a class named .creative-x (where x is the iteration number minus one).
  .creative-#{$i - 1} {
    // Slice the $rainbow_colors list to get the colors we need for this gradient.
    $gradient-colors: slice($rainbow_colors, 1, $i);

    // Initialize an empty list for the reversed colors.
    $gradient-colors-reversed: ();

    // Reverse the order of the colors.
    @for $j from length($gradient-colors) through 1 {
      $gradient-colors-reversed: append($gradient-colors-reversed, nth($gradient-colors, $j), comma);
    }

    // Set the background to be a conic gradient starting from 45 degrees with the reversed colors.
    background: conic-gradient(from 315deg, $gradient-colors-reversed...);
  }
}

ConicGradientEqualSplitsWithStops.css

/* 
 * Conic Gradient Backgrounds with Defined Color Stops
 * ---------------------------------------------------
 * These styles employ conic gradients, all beginning from a 315-degree angle.
 * Every new class introduces another shade, segmenting the circle with precision.
 * Transition points within each gradient ensure a harmonious and visually consistent shift.
 * Ideal for designers seeking an elegant look without the need for SCSS preprocessing.
 */
 
.creative-0 {
  background: conic-gradient(from 315deg, #9400D3 0% 100%);
}

.creative-1 {
  background: conic-gradient(from 315deg, #9400D3 0% 50%, #4B0082 50% 100%);
}

.creative-2 {
  background: conic-gradient(from 315deg, #0000FF 0% 33.33%, #9400D3 33.33% 66.67%, #4B0082 66.67% 100%);
}

.creative-3 {
  background: conic-gradient(from 315deg, #40FF80 0% 25%, #9400D3 25% 50%, #4B0082 50% 75%, #0000FF 75% 100%);
}

.creative-4 {
  background: conic-gradient(from 315deg, #7FFF00 0% 20%, #40FF80 20% 40%, #0000FF 40% 60%, #4B0082 60% 80%, #9400D3 80% 100%);
}

.creative-5 {
  background: conic-gradient(from 315deg, #C0FF00 0% 16.67%, #7FFF00 16.67% 33.33%, #40FF80 33.33% 50%, #0000FF 50% 66.67%, #4B0082 66.67% 83.33%, #9400D3 83.33% 100%);
}

.creative-6 {
  background: conic-gradient(from 315deg, #FFFF00 0% 14.29%, #C0FF00 14.29% 28.57%, #7FFF00 28.57% 42.86%, #40FF80 42.86% 57.14%, #0000FF 57.14% 71.43%, #4B0082 71.43% 85.71%, #9400D3 85.71% 100%);
}

.creative-7 {
  background: conic-gradient(from 315deg, #FFBF00 0% 12.5%, #FFFF00 12.5% 25%, #C0FF00 25% 37.5%, #7FFF00 37.5% 50%, #40FF80 50% 62.5%, #0000FF 62.5% 75%, #4B0082 75% 87.5%, #9400D3 87.5% 100%);
}

.creative-8 {
  background: conic-gradient(from 315deg, #FF7F00 0% 11.11%, #FFBF00 11.11% 22.22%, #FFFF00 22.22% 33.33%, #C0FF00 33.33% 44.44%, #7FFF00 44.44% 55.56%, #40FF80 55.56% 66.67%, #0000FF 66.67% 77.78%, #4B0082 77.78% 88.89%, #9400D3 88.89% 100%);
}

.creative-9 {
  background: conic-gradient(from 315deg, #FF3F00 0% 10%, #FF7F00 10% 20%, #FFBF00 20% 30%, #FFFF00 30% 40%, #C0FF00 40% 50%, #7FFF00 50% 60%, #40FF80 60% 70%, #0000FF 70% 80%, #4B0082 80% 90%, #9400D3 90% 100%);
}

.creative-10 {
  background: conic-gradient(from 315deg, #FF0000 0% 9.09%, #FF3F00 9.09% 18.18%, #FF7F00 18.18% 27.27%, #FFBF00 27.27% 36.36%, #FFFF00 36.36% 45.45%, #C0FF00 45.45% 54.55%, #7FFF00 54.55% 63.64%, #40FF80 63.64% 72.73%, #0000FF 72.73% 81.82%, #4B0082 81.82% 90.91%, #9400D3 90.91% 100%);
}

ConicGradientHalfFill.css

/* 
 * With Color Stops 
 */

.creative-0 {
  background: conic-gradient(from 270deg, #9400D3 0% 100%);
}

.creative-1 {
  background: conic-gradient(from 270deg, #4B0082 0% 50%, #9400D3 50% 100%);
}

.creative-2 {
  background: conic-gradient(from 270deg, #0000FF 0% 50%, #4B0082 50% 75%, #9400D3 75% 100%);
}

.creative-3 {
  background: conic-gradient(from 270deg, #40FF80 0% 50%, #0000FF 50% 66.66%, #4B0082 66.66% 83.32%, #9400D3 83.32% 100%);
}

.creative-4 {
  background: conic-gradient(from 270deg, #7FFF00 0% 50%, #40FF80 50% 62.5%, #0000FF 62.5% 75%, #4B0082 75% 87.5%, #9400D3 87.5% 100%);
}

.creative-5 {
  background: conic-gradient(from 270deg, #C0FF00 0% 50%, #7FFF00 50% 60%, #40FF80 60% 70%, #0000FF 70% 80%, #4B0082 80% 90%, #9400D3 90% 100%);
}

.creative-6 {
  background: conic-gradient(from 270deg, #FFFF00 0% 50%, #C0FF00 50% 58.33%, #7FFF00 58.33% 66.67%, #40FF80 66.67% 75%, #0000FF 75% 83.33%, #4B0082 83.33% 91.67%, #9400D3 91.67% 100%);
}

.creative-7 {
  background: conic-gradient(from 270deg, #FFBF00 0% 50%, #FFFF00 50% 57.14%, #C0FF00 57.14% 64.28%, #7FFF00 64.28% 71.42%, #40FF80 71.42% 78.57%, #0000FF 78.57% 85.71%, #4B0082 85.71% 92.86%, #9400D3 92.86% 100%);
}

.creative-8 {
  background: conic-gradient(from 270deg, #FF7F00 0% 50%, #FFBF00 50% 56.25%, #FFFF00 56.25% 62.5%, #C0FF00 62.5% 68.75%, #7FFF00 68.75% 75%, #40FF80 75% 81.25%, #0000FF 81.25% 87.5%, #4B0082 87.5% 93.75%, #9400D3 93.75% 100%);
}

.creative-9 {
  background: conic-gradient(from 270deg, #FF3F00 0% 50%, #FF7F00 50% 55.56%, #FFBF00 55.56% 61.11%, #FFFF00 61.11% 66.67%, #C0FF00 66.67% 72.22%, #7FFF00 72.22% 77.78%, #40FF80 77.78% 83.33%, #0000FF 83.33% 88.89%, #4B0082 88.89% 94.44%, #9400D3 94.44% 100%);
}

.creative-10 {
  background: conic-gradient(from 270deg, #FF0000 0% 50%, #FF3F00 50% 55%, #FF7F00 55% 60%, #FFBF00 60% 65%, #FFFF00 65% 70%, #C0FF00 70% 75%, #7FFF00 75% 80%, #40FF80 80% 85%, #0000FF 85% 90%, #4B0082 90% 95%, #9400D3 95% 100%);
}

/* 
 * Without Color Stops 
 */

.creative-0 {
  background: conic-gradient(from 270deg, #9400D3 0% 100%);
}

.creative-1 {
  background: conic-gradient(from 270deg, #4B0082 0% 50%, #9400D3 50% 100%);
}

.creative-2 {
  background: conic-gradient(from 270deg, #0000FF 0% 50%, #4B0082 50%, #9400D3 100%);
}

.creative-3 {
  background: conic-gradient(from 270deg, #40FF80 0% 50%, #0000FF 50%, #4B0082, #9400D3 100%);
}

.creative-4 {
  background: conic-gradient(from 270deg, #7FFF00 0% 50%, #40FF80 50%, #0000FF, #4B0082, #9400D3 100%);
}

.creative-5 {
  background: conic-gradient(from 270deg, #C0FF00 0% 50%, #7FFF00 50%, #40FF80, #0000FF, #4B0082, #9400D3 100%);
}

.creative-6 {
  background: conic-gradient(from 270deg, #FFFF00 0% 50%, #C0FF00 50%, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3 100%);
}

.creative-7 {
  background: conic-gradient(from 270deg, #FFBF00 0% 50%, #FFFF00 50%, #C0FF00, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3 100%);
}

.creative-8 {
  background: conic-gradient(from 270deg, #FF7F00 0% 50%, #FFBF00 50%, #FFFF00, #C0FF00, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3 100%);
}

.creative-9 {
  background: conic-gradient(from 270deg, #FF3F00 0% 50%, #FF7F00 50%, #FFBF00, #FFFF00, #C0FF00, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3 100%);
}

.creative-10 {
  background: conic-gradient(from 270deg, #FF0000 0% 50%, #FF3F00 50%, #FF7F00, #FFBF00, #FFFF00, #C0FF00, #7FFF00, #40FF80, #0000FF, #4B0082, #9400D3 100%);
}

ConicGradientHalfFill.scss

// This SCSS file provides two distinct styles for generating conic-gradient backgrounds:
// Note: The generated gradients initiate from a 270-degree angle, giving the appearance of the newest color
// being added at 90-degrees or 270-degrees and then spreading either counter-clockwise or clockwise.

@use "sass:math";

$rainbow_colors: (
  #9400D3,
  #4B0082,
  #0000FF,
  #40FF80,
  #7FFF00,
  #C0FF00,
  #FFFF00,
  #FFBF00,
  #FF7F00,
  #FF3F00,
  #FF0000
);

// For the special case of creative-0, we only need a single color background.
// This class uses the first color from the $rainbow_colors list as its background.
.creative-0 {
  background: nth($rainbow_colors, 1);
}

// Visually counter clock wise
@for $i from 2 through length($rainbow_colors) {
  .creative-#{$i - 1} {
    $gradient: nth($rainbow_colors, $i) + " 0% 50%";

    // Reverse the loop iteration order
    @for $j from $i - 1 through 1 {
      $color: nth($rainbow_colors, $j);
      $start: 50 + math.div(50, $i - 1) * ($i - 1 - $j);
      $end: 50 + math.div(50, $i - 1) * ($i - $j);
      $gradient: $gradient + ", " + $color + " " + $start + "% " + $end + "%";
    }

    background: conic-gradient(from 270deg, unquote($gradient));
  }
}

// Visually clock wise
@for $i from 2 through length($rainbow_colors) {
  .creative-#{$i - 1} {
    $gradient: nth($rainbow_colors, $i) + " 0% 50%";

    @for $j from 1 through $i - 1 {
      $color: nth($rainbow_colors, $j);
      $start: 50 + math.div(50, $i - 1) * ($j - 1);
      $end: 50 + math.div(50, $i - 1) * $j;
      $gradient: $gradient + ", " + $color + " " + $start + "% " + $end + "%";
    }

    background: conic-gradient(from 270deg, unquote($gradient));
  }
}