CSS Gradient

Gradients are commonly used to make a web page more aesthetically pleasing. Instead of using a plain color to style a box, a gradient allows you to show a transition between two or more colors, which can be more visually appealing and eye-catching.

To work with gradients in CSS, there are two properties you can use: linear-gradient and radial-gradient. These properties allow you to create linear and radial gradients, respectively.

This tutorial will discuss, with a few examples, how to create a linear and radial gradient in CSS. By the end of this tutorial, you’ll be an expert at creating gradients in CSS.

CSS Gradients

In design, gradients are transitions between two or more colors. Gradients can be simple transitions, but can also include angles, multiple colors, and can be styled in a wide range of ways.

There are two types of gradients supported in CSS. These are:

• Linear gradients
• Radial gradients

Linear gradients create a transition between two or more colors from top to bottom or left to right. Radial gradients are color transitions that radiate from an origin point, such as a shape.

In CSS, gradients are defined using the background CSS property. This property is used to create a background for a web element and is shorthand for the CSS background properties including background-color and background-image.

Here is the syntax for using the background property:

background: typeOfBackground;

Now we’re ready to start creating gradients in CSS. Let’s start by discussing linear gradients.

CSS Linear Gradients

Linear gradients are transitions between two or more colors along a straight line. 

For instance, a linear gradient background may appear from left to right, top to bottom, or from the bottom left to the top right corner of an element. By default, a gradient will appear from top to bottom, but you can specify a custom direction for your gradient.

Linear gradients have color stops, which are the colors you want to include in your transition. There is no limit to how many colors you specify with a linear gradient.

Here is the syntax for a linear gradient function in CSS:

background: linear-gradient (direction, color1, color2 ...);

In this syntax, direction represents the direction of the gradient, and color1, color 2, and so on represent the color stops in our gradient.

Let’s explore a few examples of a linear gradient in CSS.

Top to Bottom Gradient

Suppose we want to create a gradient that appears from the top to the bottom of a box. This is the default gradient created with the linear-gradient() property.

Our gradient should start at the color #00C9FF (light blue), and end at the color #92FE9D (light green). Here’s the code we could use to create our gradient:

.gradient {
	background: linear-gradient(#00C9FF, #92FE9D);
}

Our code returns:

Left to Right Gradient

On the other hand, we may want to create a gradient that shows a color transition from left to right. We could do so using the following code:

.gradient {
	background: linear-gradient(to right, #00C9FF, #92FE9D);
}

Our code returns:

Our gradient transitions between our two colors from left to right. This transition occurs because we specified to left as the direction of our gradient. Alternatively, if we wanted our gradient to appear from right to left, we could have used to left instead of to right in our code.

Diagonal Gradient

You can create diagonal gradients using the linear-gradient() property by specifying the horizontal and vertical starting points for a gradient.

If you wanted to create a gradient that transitions to the bottom right, you could do so by specifying to bottom right as your gradient. Or if you wanted a gradient that transitions to the top left, you could use to top left as your gradient.

Suppose we want to create a gradient that transitions to the top right of our box. We could do so using this code:

.gradient {
	background: linear-gradient(to top right, #00C9FF, #92FE9D);
}

Our code returns:

Our gradient starts with the light blue color in the bottom left, then transitions to the green color in the top right of the box.

Color Stops

So far, our gradients have only transitioned between two colors. However, you can specify more than two colors if you want to create a more complex gradient that transitions between multiple colors.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

Suppose we want to create a gradient that transitions from the color #00D2FF (light blue) to #92FE9D (light green), to #3A47D5 (dark blue). This transition should occur from left to right. We could create this gradient using this code:

.gradient {
background: linear-gradient(to right, #00D2FF, #00C9FF, #3A47D5);
}

Our code returns:

In this example, our gradient transitions between three different colors from left to right.

Angles

In our previous examples, we have used predefined directions (i.e. top right to bottom left) to create our gradients. If we want more control over how our gradients appear, we can use custom angles.

Angles should be specified as the first value in a linear gradient, in place of where you would specify a direction.

Suppose you wanted to create a transition between #00C9FF and #92FE9D at a 120-degree angle. You could do so using this code:

.gradient {
	background: linear-gradient(120deg, #00C9FF, #92FE9D);
}

Our code returns:

In our example, we specified a gradient that transitions between blue and green at a 120 degree angle from left to right. If we wanted to create a gradient that transitions at a 40 degree angle, for example, we could specify 40deg as our angle.

Transparent Gradient

CSS gradients can be made more or less transparent by using RGBA colors.

RGBA colors use the RGB (red, green, blue) method of presenting colors. However, RGBA colors include an additional parameter called alpha that defines the transparency of a color. The value of the alpha parameter should be between 0 and 1 (the lower the value, the more transparent the color will appear).

Suppose we wanted to create a gradient from left to right between the colors #00C9FF and #92FE9D. Our first color should start off 50% transparent, and our final color should be 30% transparent. We could use the following code to create this gradient:

.gradient {
	background: linear-gradient(to right, rgba(0,201,255, 0.5), rgba(146,254,157, 0.7));
}

Our code returns:

If we compare this to our previous gradient, we can see our colors are more transparent. In this example, we used RGBA values to specify our colors instead of using hex values.

We specified 0.5 as the alpha value for our first color (blue), which makes the color 50% transparent. We specified 0.3 as the alpha value for our second color (green), which makes the color 70% transparent (remember, the lower the alpha value, the more transparent the color will appear).

Hard Lines

Usually, when you’re creating a gradient, you’ll want a smooth and gradual transition between the colors in your gradient. However, if you want to create a gradient line that separates two colors in a gradient, you can do so by specifying a hard line.

To specify a hard line, you should use the following syntax:

linear-gradient(direction, hard-line, colors);

So, if you wanted to have a hard line that occurs half-way through a black and green gradient, you could use black 50%, green 50% as a hard line. Or if you wanted to have a hard line that appears 70% through a blue and pink gradient, you could use blue 70%, pink 30% as a hard line.

Here’s an example of a gradient with a black hard line at the half-way point in the gradient:

.gradient {
	background: linear-gradient(to right, #00C9FF 50%, #92FE9D 50%);
}

Our code returns:

In this image you can see that, half-way through our gradient, a hard stop position has been created.

CSS Radial Gradients

Radial gradients are transitions between two or more colors that radiate from an origin point. The origin point for a linear gradient is either an ellipse or a circle.

A radial gradient must have at least two color stops, and there is no limit to how many color stops you can have in your gradient. Here is the syntax for a radial gradient:

background: radial-gradient(shape size position, start color, next colors …, final color);

Let’s break down this syntax:

• shape is the shape of the radial object (by default, this is an ellipse).
• size is the size of the shape for your radial object (by default, this is farthest-corner).
• at position is the position of the radial object (by default, this is center).
• start color is the first color in the gradient.
• next colors … are the colors between the start and final colors.
• final color is the last color in the gradient.

Now we know the syntax for creating a radial gradient in CSS, we can explore a few examples.

Default Radial Gradient

Suppose we want to create a radial gradient that is an ellipse and transitions between #4B6CB7 and #D9E7FF. We could do so using this code:

.gradient {
	background: radial-gradient(#4B6CB7, #D9E7FF);
}

Our code returns:

In our example, we have created a radial gradient using two colors and the default values for a gradient. So, because we used the default values, our gradient is evenly spaced, the position of our radial object is in the center of the box, and our radial object is an ellipse.

Different Color Stops

When you’re working with radial gradients, you can specify your own color stops. This means that the transition between different colors in your gradient will occur at a specific position in the gradient, instead of in accordance with the default smooth transition.

Suppose we wanted to create a radial gradient that transitions from #4B6CB7 to #D9E7FF to #9198E5. The first color should account for 25% of the gradient, the middle color should account for 50% of the gradient, and the last color should account for 25% of the gradient.

We could create this gradient using the following code:

.gradient {
	background: radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%);
}

Our code returns:

Our gradient transitions between three colors at the points we specified in our code. To accomplish this effect, we first specified the color we wanted to include in our gradient, then we specified how much of the gradient for which the color should account. So, for instance, our middle color, #D9E7FF, occupies 50% of our gradient.

Different Shapes

By default, the shape set for a radial gradient is an ellipse. However, you can also make your gradient a circle. You can do so by specifying the shape value circle for your gradient.

Suppose you wanted to create a gradient that transitions between #4B6CB7 and #D9E7FF. The center point of your radial gradient should be a circle. You could create this gradient using the following code:

.gradient {
	background: radial-gradient(circle, #4B6CB7, #D9E7FF);
}

Our code returns:

In our example, we have created a radial gradient between the color #4B6CB7 and #D9E7FF. The central point of our radial gradient is a circle, rather than an ellipse.

Radial Gradient Position

The position of a radial gradient’s center object can be changed. There are four keywords that are used to determine the position of the central object in a radial gradient. These are:

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

Suppose we wanted to create a circular radial gradient that appeared in the farthest corner at the position 50px 50px. We could do so using this code:

.gradient {
	background: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF);
}

Our code returns:

In this example, our radial gradient center point appears in the farthest corner at the position 50px 50px. You can see that our center point is in the top left corner, which shows that our gradient is working as intended. Then, our gradient transitions outward to the next color that we specified in our code.

Conclusion

Gradients are used to create transitions between two or more colors in CSS. The two main types of gradients used in CSS are linear gradients and radial gradients.

This tutorial discussed, with reference to examples, how to create linear and radial gradients in CSS, and how to customize those gradients using the various attributes offered by each gradient type. Now you’re equipped with the knowledge you need to start working with CSS gradients like an expert!