CSS Creating Gradients (Conic Gradients)

CSS Conic Gradients

A conic gradient is a gradient with color transitions rotated around a center point.

To create a conic gradient you must define at least two colors.

Syntax

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

By default, angle is 0deg and position is center.

If no degree is specified, the colors will be spread equally around the center point.

Conic Gradient: Three Colors

The following example shows a conic gradient with three colors:

Example

A conic gradient with three colors:

#grad {
background-image: conic-gradient(blue, lightyellow, lightgreen);
}

Conic Gradient: Five Colors

The following example shows a conic gradient with five colors:

Example

A conic gradient with five colors:

#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}

Conic Gradient: Three Colors and Degrees

The following example shows a conic gradient with three colors and a degree for each color:

Example

A conic gradient with three colors and a degree for each color:

#grad {
background-image: conic-gradient(blue 45deg, lightyellow 90deg, darkgreen 210deg);
}

Create Pie Charts

Just add border-radius: 50% to make the conic gradient look like a pie:

Example

#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}

Here is another pie chart with defined degrees for all the colors:

In this example, there will be no transitions shown between colors, that is because, the color stops and starts at same degree.

Example

#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}

Conic Gradient With Specified From Angle

The [from angle] specifies an angle that the entire conic gradient is rotated by.

The following example shows a conic gradient with a from angle of 90deg:

Syntax

/* 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);

Example

A conic gradient with a from angle:

#grad {
background-image: conic-gradient(from 90deg, blue, lightyellow, lightgreen);
}

Conic Gradient With Specified Center Position

The [at position] specifies the center of the conic gradient.

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.

The following example shows a conic gradient with a center position of 60% 45%:

Example

A conic gradient with a specified center position:

#grad {
background-image: conic-gradient(at 60% 45%, blue, lightyellow, lightgreen);
}

Repeating a Conic Gradient

The repeating-conic-gradient() function is used to repeat conic gradients:

Example

A repeating conic gradient:

#grad {
background-image: repeating-conic-gradient(blue 10%, lightyellow 20%);
border-radius: 50%;
}

Here is a repeating conic gradient with defined color-starts and color-stops:

Example

A repeating conic gradient with defined color-starts and color-stops:

#grad {
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}

CSS Gradient Functions

The following table lists the CSS gradient functions:

Function	Description
conic-gradient()	Creates a conic gradient. Define at least two colors (around a center point)
linear-gradient()	Creates a linear gradient. Define at least two colors (top to bottom)
radial-gradient()	Creates a radial gradient. Define at least two colors (center to edges)
repeating-conic-gradient()	Repeats a conic gradient
repeating-linear-gradient()	Repeats a linear gradient
repeating-radial-gradient()	Repeats a radial gradient