🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

Creating CSS Gradients: Add Radial, Linear and Conic Gradients

Reading time 4 min
Published Nov 19, 2016
Updated Oct 14, 2019

TL;DR – CSS gradients refer to images that display a smooth transition between several colors. CSS offers three options: linear-gradient, radial-gradient, and conic-gradient.

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.

Example
#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). 

Example
#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:

Example
#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:

Example
#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:

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

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

Example
#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:

Example
#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:

Example
#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:

Example
#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:

Example
#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:

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

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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:

Example
#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.

Example
#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:

Example
#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:

Example
#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:

Example
#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.