How to Have Gradient Background in CSS
This trivial guide is about the use of CSS properties that can be used to define rainbow-like gradient backgrounds for HTML elements.
CSS Gradients
You can display seamless transitions between two or more specified colors using CSS gradients. CSS identifies three different gradient types:
- Linear Gradients (moves left, right, up, down, diagonally)
- Rounded Gradients (defined by their center)
- CONIC Gradients (rotates around a center point)
Gradients can be used in backgrounds and anywhere else an image would be used. Gradients can eliminate the need for the bitmap graphics image files previously used to acquire similar effects because they are dynamically generated.
Gradients can also be resized instantly and look better when zoomed in than bitmap images because the browser generates them.
We’ll discuss features that apply to all gradient types starting with linear gradients. From there, we’ll move on to radial and conic gradients.
Linear Gradient
It would be best to define at least two color stops to create a linear gradient. We define some of the colors we need to make a smooth transition.
These colors are termed color stops. You can specify the start point and direction (or an angle) along with the gradient effect.
Syntax - Linear Gradient:
background-image: linear-gradient(direction, color1, color2, ...);
Any number of colors is allowed to be specified. Direction is also an optional argument; by default, the direction is linearly from top to bottom.
The following HTML page contains a div with a height of 100px and a gradient background image.
<head>
<style>
#myBlock {
height: 100px;
background-image: linear-gradient(yellow, grey);
}
</style>
</head>
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Note that we have not specified the direction of the gradient, so it is set to the top to bottom direction because it is the value for direction.
Moreover, we can specify any direction with the name or with the angle as well. The following example sets the gradient from the left to right direction.
#myBlock {
height: 100px;
background-image: linear-gradient(to right,blue,pink);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
You can specify the direction in a diagonal position. For that, starting positions in horizontal and vertical directions should be specified.
#myBlock {
height: 100px;
background-image: linear-gradient(to bottom right,grey,yellow,orange);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
You can specify the direction angle to have more control over your color settings.
#myBlock {
height: 100px;
background-image: linear-gradient(160deg,grey,yellow,orange);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Position Your Colors
Your color stops don’t have to stay in their default locations. You can adjust each one’s position by giving it a value of zero, one, or two percentages.
The starting and ending points of a location specified as a percentage are 0% and 100%, respectively. However, if necessary, values outside those ranges may be used to achieve the desired result.
If you don’t specify a location, the position of that specific color stop will be determined for you automatically. The first and last color stops will be at 0% and 100%, respectively, and any additional color stops will be halfway between their adjacent color stops.
Consider the following example in which we used three colors and specified their positions in three ways: one with px, one with percentage, and the last one is left as it is so that its position is set accordingly.
#myBlock {
height: 100px;
background: linear-gradient(to right, yellow 28px, red 77%, magenta);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Radial Gradients
In contrast to linear gradients, radial gradients radiate outward from a central point. The location of that central point is up to you, and it can also be made to be elliptical or circular.
Similar to linear gradients, radial gradients only require using two colors. By default, the gradient’s center is at the 50% mark, and it’s elliptical to match the box’s aspect ratio:
Syntax - Radial Gradient:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
For example, the following CSS code creates a radial gradient with three colors. If we don’t specify any position or shape, it evenly spreads all the colors starting from the center point.
#myBlock {
height: 100px;
background: radial-gradient(red, yellow, magenta);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Sizing of Radial Gradients
Radial gradients allow you to specify the size, unlike linear gradients. The closest-corner, closest-side, farthest-corner, and farthest-side values are among the options, with farthest-corner serving as the default.
Ellipses and circles both have additional size options, including length and percentage. The following examples show the different sizes with their corresponding outputs.
#myBlock {
height: 100px;
background-image: radial-gradient(closest-side at 65% 50%, magenta, yellow, beige);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
#myBlock {
height: 100px;
background-image: radial-gradient(farthest-side at 65% 50%, magenta, yellow, beige);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Conic Gradients
Conic Gradient is the type of gradient in which the colors are rotated about a center point defined (rather than radiating from the center). Pie charts and color wheels are two examples of conic gradients, but they can also be used to make checkerboards and some more intriguing effects.
The conic-gradient syntax is equivalent to radial-gradient syntax. However, the color stops must be defined in the unit of degree and percentages only, but not absolute lengths.
They must also be placed around the gradient arc rather than on the gradient line that emerges from the gradient’s center.
Syntax - Conic Gradient:
background-image: conic-gradient([angle] [position,] color [degree], color [degree], ...);
The default position and angle are 0 and center, respectively.
For example, the colors of the gradient will be distributed evenly around the center point if no degree is specified.
#myBlock {
height: 100px;
background-image: conic-gradient(red, yellow, cyan);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Position of Conic Gradients
Similar to Radial Gradients, one can also specify the position of the center point in conic gradients.
The following code example specifies the position of the center point as well as the degree of all the colors.
#myBlock {
height: 100px;
background-image: conic-gradient(at 10% 40%, cyan 10%, magenta 30%, yellow 50%);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Change the Angle Degree of the Gradient
The list of colors you define is ordinarily distributed evenly around the circle. To specify the starting angle of the conic gradient, use the from keyword and specify the angle after it.
We can also specify different locations for the color stops by adding an angle or length after them. The following example defines the angle for setting the center of the conic gradient.
#myBlock {
height: 100px;
background-image: conic-gradient(from 48deg, red, orange 40%, yellow 65%, green);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Conclusion
We have multiple options that allow us to set the gradient background. As in all the examples, we have set the gradient background of a div element.
In a similar pattern, this background can be set with any HTML element, provided that it supports the application of the background image.