If you’ve been on the internet for more than a few minutes, chances are that you’ve come across a CSS gradient. The CSS background property can be used to create a range of different styles, and one of the most intriguing types is what it can do with the gradient value.
Knowing how to design and create different CSS gradients is an asset for any software designer or developer. From this article, you’ll learn everything you need to know to start incorporating CSS gradients in your projects.
What Is a CSS Gradient?
A CSS gradient is essentially the combination of two or more colors that smoothly transitions from one to the next. The transitional state of a CSS gradient is dependent on the type of gradient used. There are two main types of gradients commonly used in software design: linear and radial.
However, there’s a third type of gradient that’s less popular and known as the conic gradient.
CSS Gradients Syntax
Background-image: gradient-type (direction, color1, color2);
The CSS gradient should be assigned to the background-image CSS property. The gradient type can be one of several; linear-gradient, radial-gradient, or conic-gradient. The gradient type is followed by opening and closing brackets that contains the transitional direction of the gradient, as well as the colors to be included in the gradient.
The example above shows two colors, but a gradient can contain several different colors. The only requirement is that each color in the list is separated by a comma.
What Is a Linear Gradient?
The linear gradient is the most popular CSS gradient. It creates a horizontal, vertical, or diagonal transitioning gradient using two or more colors.
CSS Linear Gradient Example
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
The code above will produce the following CSS gradient:
There’s one major component of the gradient syntax omitted from the example above. This component is the transitional direction of the gradient, and it was omitted because the default alignment of the linear gradient is vertical (top-to-bottom); that’s the desired output in this example.
The code above produces the same result as the following line of code. The only difference between the two is the direction section of the code.
Using the Bottom Linear Gradient Example
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
As you can see from the output the code above creates a gradient that starts with blue on the top then slowly transitions to the orange at the bottom. If you wanted to reverse the order of the colors you could simply replace the to bottom with to top and this will reverse the direction of the gradient, producing the following output:
Similar to the vertical alignment, the horizontal alignment of a gradient can be achieved with the use of two sets of direction keywords: to left and to right, which will produce the following outputs, respectively.
Diagonal Linear Gradient
It’s possible to achieve a diagonal linear gradient transition in any direction of a linear gradient. There are just four specific lists of keywords that you need to know to make this possible.
- To bottom right
- To bottom left
- To top right
- To top left
Using the Diagonal Linear Gradient Example
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
The example above produces the following output:
As you can see from the output above, the linear gradient makes its transition in a diagonal direction moving from the top left to the bottom right section of the gradient.
Multicolored Linear Gradient
A linear gradient can have two or more colors, but what do more colors look like in a gradient? A multicolored linear gradient color arrangement is dependent on its direction. The ones transitioning in a horizontal direction will have each new color appearing to the left or the right of the linear gradient, depending on the exact direction of the linear gradient.
Multicolored Linear Gradient Example
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
The line of code above will produce the following output:
As you can see each new color is added to the right of the gradient, creating what eventually morphs into a rainbow. The same output can be achieved in a vertical direction; however, the specific color arrangement on the linear gradient will depend on the vertical direction keyword (to top or to bottom).
What Is a Radial Gradient?
The Radial gradient creates a spiraling gradient of two are more colors that start from the center by default. Where the linear gradient produces a straight gradient that flows vertically or horizontally, the radial gradient produces a circular gradient that flows from the center to the outer edges.
Using the Radial Gradient Example
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
The line of code above will produce the following output:
Changing the Radial Gradient Center
By default a radial gradient starts at the center of the gradient; however, it’s possible to change the point of origin with the introduction of a few keywords.
Changing the Radial Gradient Start Position Example
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
The line of code above will produce the following output:
As you can see from the output above the gradient now starts from the top right corner instead of the center. This change is possible because of the inclusion of the keyword top right in the code above. The following list of keywords can also be used to change the point of origin of the radial gradient:
- Top left
- Bottom right
- Bottom left
Multicolored Radial Gradients
Like the linear gradient, the radial gradient can also use two are more colors, the major difference is that where the linear gradient adds to the gradient in a straight line, the radial gradient adds new colors on the outer edge.
Multicolored Radial Gradient Example
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
The line of code above will produce the following output:
Customizing Gradients
So far you’ve seen how to change the direction and center point of a gradient, but you haven’t seen how to customize a gradient. Customizing a gradient might sound like a lot of work, but once you understand the basics of creating a CSS background gradient the next obvious step is learning how to make your CSS gradients more unique.
By default, the colors in a gradient occupy an evenly distributed amount of space with each color smoothly transitioning into the one after it. So if two colors are combined to form a gradient, each color will occupy half of the space available while transitioning from one to the other. If three colors are combined each color will occupy one-third of the space that’s available.
With a customized gradient, you get to define the amount of space a color will occupy in a gradient by explicitly assigning the color-stop position.
Customizing a Linear Gradient Example 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
The line of code above will produce the following output:
The output above shows the second color in the linear gradient stopping at the 30% point of the first color in the gradient, instead of its customary position, and because the second color is also the final color in the gradient it naturally extends to the end.
If you were to place the 30% in the code above at the end of the first color things should become clearer.
Customizing a Linear Gradient Example 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
The code above will produce the following output.
The output above clearly shows the first color in the gradient stopping at the 30% point of the second color in the gradient. This example along with the one above should help to make color-stop customization easier for you to understand.
Customizing a radial gradient is done in the same way as a linear gradient. The only thing that you need to do to achieve the same results above in a radial gradient is to change the gradient type and direction.
Create CSS Gradients has Never Been Easier
This tutorial article provides you with the tools to identify and create linear and radial gradients. If you’ve made it to this point, you learned how to change the direction and the center of a gradient. Additionally, you now have the skills to customize CSS gradients and create unique background gradients.
However, if you don’t want to go straight into creating new and unique gradients, you can start by creating some great looking pre-existing ones.