CSS gradients linear, radial & conic all you need to know about

CSS gradients are nothing but the color gradients using CSS. A color gradient or a color transition is the gradual blending of colors from one color to the other color. This color transition can happen between a minimum of two colors to any number of colors.

CSS is a styling language for HTML markup and so it deals with the colors. 

In CSS there are three types of color gradients:

1. Linear gradient
2. Radial gradient
3. Conic gradient

Let's see how to generate each type of CSS gradient.

1. CSS linear gradient

A linear gradient is a color gradient where the transition of colors happen linearly. To generate a linear gradient at least two colors are needed and these are often called color stops. 

Though linear gradients are linear we can choose the direction of this linearity, it could be horizontal, vertical, diagonal, or in the specific angle direction. 

To generate a linear gradient using CSS we use the linear-gradient CSS function with a minimum of two arguments. This linear gradient value is assigned to the background-image property of CSS.

background-image: linear-gradient([direction], color-stop1, color-stop2, ...);

In the above CSS snippet, the default direction is top to bottom and so it can be omitted if we want to go by default direction. The color stops can be of any valid CSS colors e.g., blue, #0000FF, rgb(0, 0, 255), rgba(0, 0, 255, 0.2) etc for all types of gradients in CSS.

Let's see an example.

<!-- HTML that we consider for all linear-gradients -->
<div class="box" style="width: 100%; height: 75px"></div>

.box {
  background-image: linear-gradient(blue, red);
}

We can see that the linear gradient from blue to red is applied in the default direction from top to bottom.

The available values for the direction are:

For horizontal & vertical: to right, to left, to bottom, to top

For diagonal: to bottom right, to bottom left, to top right, to top left

For angle: (0 to 360)deg

Example for a horizontal gradient:

.box {
  background-image: linear-gradient(to right, blue, red);
}

---

Example for more than two colors' gradient:

.box {
  background-image: linear-gradient(to top, blue, red, yellow);
}

---

Example for a diagonal gradient:

.box {
  background-image: linear-gradient(to bottom right, blue, red);
}

---

Example for an angle gradient:

The angle direction will be clockwise and it starts from the top like 12'O clock. So 0deg is equivalent to to top, 90deg equivalent to to right, 180deg equivalent to to bottom and so on.

.box {
  background-image: linear-gradient(120deg, blue, red);
}

---

Example for a specific color-stop location gradient:

You can specify the location of the color stop explicitly by percentage or in px after the color. This value can be negative in order to start the transition much before the starting point and can be more than 100% to end the transition far after the ending point.

.box {
  background-image: linear-gradient(to right, blue 60%, red 110%);
}

.box {
  background-image: linear-gradient(to right, blue -30%, red 90%);
}

---

Example for a hard-lined linear gradient:

.box {
  background-image: linear-gradient(to right, blue 50%, red 50%);
}

---

Example for creating color bands with two color stops:

You can have multiple stops for the color indicating the start and stop. Using this method you can create bands of colors.

.box {
  background-image: linear-gradient(
    to right,
    blue 25%,
    red 25%,
    red 50%,
    green 50%,
    green 75%,
    yellow 75%
  );
}

---

Example for a repeating linear gradient:

We can repeat the linear gradient by using repeating-linear-gradient function, instead of linear-gradient.

.box {
  background-image: repeating-linear-gradient(to right, blue 20%, red 40%);
}

And that is all about linear gradients in CSS. Let's see CSS radial gradients.

2. CSS radial gradient

A radial gradient is a color gradient where the transition of colors happen in a radial fashion i.e., the colors transition from a central point.

To generate a radial gradient at least two colors are needed just like the linear gradient.

Radial gradiants can be made circular or elliptical. By default, the center of the gradient is at the 50% 50% mark, shape is elliptical, size is farthest-corner. 

background-image: radial-gradient([shape size at position], color-stop1, color-stop2, ...);

Let's see an example

<!-- HTML that we consider for all radial-gradients -->
<div class="box" style="width: 100%; height: 100px"></div>

.box {
    background-image: radial-gradient(blue, red);
}

The possible values for the shape are circle and ellipse

The possible values for the radiance or gradient size are: 

• closest-side
• farthest-side
• closest-corner
• farthest-corner

For circle size can be given in terms of length(px, rem, em). e.g., circle 50px

For ellipse size can be given in terms of length or percentage. e.g., ellipse 100px, 30px, first length/percentage indicates horizontal radius and the second length/percentage indicates vertical radius of the ellipse.

Similar to the linear-gradient, we can choose the color stop location with a percentage or length after the color. 

Let's see examples for each type of radial gradient.

Example for a circle shaped radial-gradient:

.box {
  /* default size and position will be considered */
  background: radial-gradient(circle, blue, red);
}

---

Example for a radial gradient with shape, size and position:

.box {
  background: radial-gradient(circle closest-side at 20% 50%, blue, red);
}

---

Example for a radial gradient with circle length:

.box {
  /* default position is considered, 50px is the size, circle is the shape */
  background: radial-gradient(circle 50px, royalBlue 10%, Cyan 20%, Tomato 60%, SpringGreen);
}

If you are wondering how to know those different color names for direct use, then you can have a look at this CSS color names to use directly article.

---

Example for a repeating radial gradient:

Just like in linear gradient we can also have repeating transitions of radial gradient using repeating-radial-gradient CSS function. All the parameters remain just like the normal radial gradient.

.box {
  /* 20px 10px is the size of the ellipse and default position center */
  background: repeating-radial-gradient(ellipse 20px 10px, royalBlue 10%, Cyan 20%, Tomato 60%, SpringGreen);
}

That is all about radial-gradients in CSS. Let's go to the last CSS gradient type conic.

3. CSS conic gradient

A conic gradient is a color gradient where the transition of colors happen in a rotated fashion i.e., the colors transition at angles from a point.

To generate a conic gradient at least two colors are needed just like the linear and radial gradient.

By default, the position of the gradient is at 50% 50% mark or at  center and starting or from angle is 0deg. These degrees start from top, like starting from 12'O clock in clockwise direction. 

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

Let's see a quick example of this conic gradient:

<!-- HTML that we consider for all conic-gradients -->
<div class="box" style="width: 100px; height: 100px"></div>

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

Conic gradient with default position and angle

In the above conic gradient we can see the gradient position at center and the starting angle 0deg. 

The possible values of from angle are: (0-360)deg

The possible values of position of the conic gradient are in percentage or in pixels.

e.g.,50% 50%.

Let's see examples for each type of conic gradient.

Example for a conic gradient with more than two colors:

.box {
  /* default angle 0deg, position center */
  background: conic-gradient(blue, red, green, tomato, hotpink);
}

Multi colored conic gradient

---

Example for a conic gradient with color stop degrees:

.box {
  background: conic-gradient(blue 60deg, red 120deg, green 270deg);
}

Conic gradient with color stop angles

---

Example for conic gradient with initial degree and position:

.box {
  background: conic-gradient(from 90deg at 60% 40%, blue 60deg, red 120deg, green 270deg);
}

Conic-gradient with a specific from angle and position

---

Example for a conic gradient pie-chart:

You can create a pie-chart with the help of conic gradient. By using start and stop, color stops for each color we can create hard-lined separations. This is something like the color band that we have seen in linear-gradients, but this one will be in degrees. And to make it appear like a circle instead of a square, we just need to make the border-radius to 50%.

.box {
  background: conic-gradient(from 90deg, blue 120deg, red 120deg, red 240deg, green 240deg, green 360deg);
  border-radius: 50%;
}

Pie-chart with conic gradient

---

Example for a repeating conic gradient:

Just like in linear and radial gradients we can also have repeating transitions of conic gradient using repeating-conic-gradient CSS function. All the parameters remain just like the normal conic gradient.

.box {
  background: repeating-conic-gradient(blue 30deg, red 90deg); 
  border-radius: 50%;
}

Repeating conic gradient in a circle shape

And that is all about different types of CSS gradients. Hope this article has given a clear insight in generating gradients with CSS.