Day 21: conic gradients

posted on 24.10.2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

You can create gradients with color transitions rotated around a center point, rather than radiating from the center, by using the conic-gradient() function.

There are many options to customize conic gradients.

Colors only

The simplest way to create a conic gradient is to pass a list of colors to the function.

div {
  background-image: conic-gradient(aqua, fuchsia, salmon, aqua);  
}

Angle

By default, the gradient starts at 0 degrees and rotates clockwise.

div {
  background-image: conic-gradient(aqua, fuchsia);  
}

You can pass an angle, preceded by the “from” keyword, to change the starting point.

div {
  background-image: conic-gradient(from 90deg, aqua, fuchsia);  
}

Off-centered gradient

By default, the center pointer of the gradient is at the center of the element. You can change that by passing a length, percentage, or keyword.

Length

div {
  background-image: conic-gradient(from 90deg at 4rem 4rem, aqua, fuchsia);
}

Percentage

div {
  background-image: conic-gradient(from 90deg at 25% 75%, aqua, fuchsia);
}

Keywords

div {
  background-image: conic-gradient(from 90deg at center left, aqua, fuchsia);
}

Custom color stop positions

By default, color stops are placed halfway between the one that precedes it and the one that follows it, with color transitioning smoothly. The first is at 0deg and the last at 360deg.
The following two gradients are equivalent.

div {
  background-image: conic-gradient(aqua, fuchsia, salmon, aqua);  
  background-image: conic-gradient(aqua 0deg, fuchsia 120deg, salmon 240deg, aqua 360deg);  
}

You can move the transitiom midpoint for any color.

div {
  background-image: conic-gradient(aqua 0deg, fuchsia 80deg, salmon 130deg, aqua 360deg);
}

You can pass a second color stop value to define where the color starts and stops.

div {
  background-image: conic-gradient(aqua 0deg 50deg, fuchsia 80deg 100deg, salmon 130deg 140deg, aqua 360deg)
}

If two or more colors are at the same location, there will be a hard line between the colors.

div {
  background-image: conic-gradient(aqua 0deg 120deg, fuchsia 120deg 240deg, salmon 240deg 360deg);  
}

See on CodePen