Creating CSS Gradients: Add Radial, Linear and Conic Gradients

Creating Linear Gradients

CSS creates linear gradients with the linear-gradient() function. The result of this function is an image showing a transition between multiple colors along a straight line.

An easy way of creating linear gradients in CSS is using the linear-gradient function and indicating several color values in the parentheses:

background: linear-gradient(direction, color-stp1, color-stp2, ...);

Up/Down Transition (default)

In this example, a linear gradient in CSS starts at the top and transitions going down. CSS sets this direction automatically when there are no other directional keywords.

#grad {
    background: linear-gradient(#ff5e7c, #c272d4);
}

Left/Right Transition

In this example, a linear gradient starts from the left and goes to the right (as defined). 

#grad {
  background: linear-gradient(to right, #ff5e7c, #c272d4);
}

Diagonal Transition

The gradient can transition diagonally by defining both the vertical and horizontal directions. In this example, a linear gradient starts at the top left and goes to the bottom right:

#grad {
  background: linear-gradient(to bottom right, #ff5e7c, #c272d4); 
}

Manipulating Linear Gradients

Angle

Besides naming keywords to set the direction of gradients, CSS can describe specific angles for the transition.
background: linear-gradient(angle, color-stp1, color-stp2);

This example defines that the linear gradient would have 180 degrees:

#grad {
  background: linear-gradient(180deg, #ff5e7c, #c272d4); 
}

Using Multiple Color Stops

CSS accepts more than two color values for gradients.

This example has a linear gradient (default direction from top to bottom) with three color stops:

#grad {
  background: linear-gradient(#ff5e7c, #c272d4, #718ced); 
}

This example shows a linear gradient (from right to left) with multiple colors is shown:

#grad {
  background: linear-gradient(to left, #ff5e7c, #c272d4, #718ced, #02aab0, #00cdac);
}

Using Transparency in Transitions

Transparency value creates an effect of a transparent, fading gradient in CSS.

RGBA() or HSLA() indicators add the opacity value from 0 to 1 (1 indicating solid colors).

This example shows how you set transparent gradient in CSS:

#grad {
  background: linear-gradient(to right, rgb(255, 94, 124, 0.5), rgb(194, 114, 212, 1)); 
}

Multiplying Linear Gradients

CSS gradients can repeat to create a pattern of stripes by using the repeating-linear-gradient() property. As a result, CSS creates many small rectangles.

This example repeats the gradient pattern:

#grad {
  background: repeating-linear-gradient(#718ced, #753a88 15%, #ff5e7c 25%); 
}

Creating Radial Gradients

The CSS radial gradients create images that transition between multiple colors that radiate from a specific spot.

background: radial-gradient(shape size at position, start-color, ..., last-color);

Note: by default, the shape is an ellipse, the position is center and size is farthest-corner.

Evenly Spaced Color Stops (Default)

By default, the CSS radial gradient starts radiating from the center of elements and transitions to other colors towards the edges.

This example shows a transition that begins at the center:

#grad {
  background: radial-gradient(#ff5e7c, #c272d4, #6bbae8); 
}

Differently Spaced Color Stops

The percentage values (%) added to color indicators describe how much space each color should take.

This example shows a radial gradient that does not arrange colors equally:

#grad {
  background: radial-gradient(#ff5e7c 10%, #c272d4 50%, #6bbae8 80%);
}

Setting Shape

The shape parameter in radial gradients specifies what form should the CSS create. The value can be ellipse or circle. The ellipse is the default.

This example creates a radial gradient in a circle:

#grad {
  background: radial-gradient(circle, #ff5e7c, #c272d4, #6bbae8); 
}

Theory is great, but we recommend digging deeper!

CSS Animation Tutorial: Bring Interactivity into Your UI/UX

Jazeb Akram

5.0 (0)

Manipulating Radial Gradients

Size Keywords

The size parameter specifies the gradient size. Here are the possible values:

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

Tip: decide on which value you need by placing it in this sentence — let the color fade from the center to the [insert the value].

In the example, we use two opposite values to illustrate the difference between closest-side and farthest-side:

#grad1 {
  background: radial-gradient(closest-side at 65% 50%, #ff5e7c, #c272d4, #6bbae8); 
}

#grad2 {
  background: radial-gradient(farthest-side at 65% 50%, #ff5e7c, #c272d4, #6bbae8); 
}

Repeating Radial Gradients

The repeating-radial-gradient property lets you repeat the radial gradient in CSS to create spiral patterns.

#grad {
  background: repeating-radial-gradient(#5b07ff, #ff008d 15%, #5d78f9 25%); 
}

Setting Conic Gradients

The conic-gradient() function creates a transition similarly to CSS radial-gradient(). They both start the transition from the center, but conic gradients put color stops around the circle.

A basic example of a conic gradient in CSS looks like this:

#grad {
 height: 300px;
 width: 600px;
 background: blue; /* In case a browser doesn't support gradients */
 background: conic-gradient(#ff5e7c, #c272d4, #6bbae8); /* Standard syntax */
 background: -webkit-conic-gradient(#ff5e7c, #c272d4, #6bbae8); /* Safari */
}

Remember: the conic-gradient() function does not have the best browser support — it only works on Google Chrome, Opera, and Safari.

Creating Conic Gradients From Other Spots

If you specify percentages other than 50% and 50%, the transition begins at a different point:

#grad {
 height: 300px;
 width: 600px;
 background: blue; /* In case a browser doesn't support gradients */
background: conic-gradient(at 30% 30%, #ff5e7c, #c272d4, #6bbae8); /* Standard syntax */
  background: -webkit-conic-gradient(at 30% 30%,#ff5e7c, #c272d4, #6bbae8); /* Safari */
}

Setting an Angle

If you need to begin the transition from a different angle, you can specify it like this:

#grad {
 height: 300px;
 width: 600px;
 background: blue; /* In case a browser doesn't support gradients */
background: conic-gradient(from 60deg, #ff5e7c, #c272d4, #6bbae8); /* Standard syntax */
  background: -webkit-conic-gradient(from 60deg,#ff5e7c, #c272d4, #6bbae8); /* Safari */
}

CSS Gradient: Useful Tips

• Make sure to include the background-color property as a fallback function in case gradients do not work in some browsers.
• You can use CSS gradients anywhere you would normally add an image. Since browsers create gradients, they look better than raster images.