Gradient backgrounds in CSS

Current Location：Home > Learning > WEB FRONT-END > CSS >

Vue React JavaScript Angular CSS HTML

Gradient backgrounds in CSS

Author：JIYIK Last Updated：2025/04/19 Views：

This simple guide is about the use of CSS properties that can be used to define a rainbow-like gradient background for an HTML element.

CSS Gradients

We can use CSS gradients to display a seamless transition between two or more specified colors. CSS recognizes three different types of gradients:

Linear gradient (left, right, up, down, diagonal movement)
Radial gradients (defined by their center)
Conical gradient (rotating around a center point)

Gradients can be used in backgrounds or anywhere an image can be used. Gradients can eliminate the need for bitmap graphic image files that were previously used to achieve similar effects because they are generated dynamically.

Gradients are also instantly resizable and look better than bitmap images when zoomed in because the browser generates them.

We'll start with linear gradients and discuss properties that apply to all gradient types. From there, we'll move on to radial and conic gradients.

Linear Gradient

It is best to define at least two color stops to create a linear gradient. We define a few colors that are needed for a smooth transition.

These colors are called color stops. You can specify the starting point and the direction (or angle) and gradient effect.

Syntax - Linear Gradient:

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

Allows any number of colors to be specified. Direction is also an optional parameter; by default, the direction is linear from top to bottom.

The following HTML page contains a div with a height of 100 pixels 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>

请注意, we didn't specify the direction of the gradient, so it is set to go from top to bottom since that is the value of the direction.

In addition, we can specify any direction by name or angle. The following example sets the gradient direction from left to right.

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

We can specify the direction in diagonal position. To do this, the starting position in horizontal and vertical direction 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 a direction angle to gain more control over 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 the default position. You can adjust the position of each one by giving it a value of zero, one, or two percentages.

Positions specified as percentages start at 0% and end at 100%. However, if necessary, you can use values outside of these ranges to achieve the desired results.

If you do not specify a position, the position of that particular color stop is automatically determined for you. The first and last color stops will be at 0% and 100% respectively, and any other color stops will be halfway between their neighbors.

Consider the following example where we use three colors and specify their positions in three ways: one using px, one using percentages and the last one left as is so that their positions are 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 Gradient

In contrast to linear gradients, radial gradients radiate outward from a central point. The location of that central point is up to you, and can be made elliptical or circular.

Similar to linear gradients, radial gradients only require the use of two colors. By default, the center of the gradient is at the 50% mark, and it is elliptical to match the aspect ratio of the box:

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 will evenly distribute 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>

The size of the radial gradient

Unlike linear gradients, radial gradients allow you to specify the size. The closest-corner, closest-side, farthest-corner, and farthest-side values are all in the options, with farthest-corner being the default.

Both ellipses and circles have other size options, including length and percentage. The following examples show different sizes and their corresponding output.

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

Tapered gradient

A conic gradient is a type of gradient where the colors rotate around a defined center point (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 interesting effects.

The conic-gradient syntax is identical to the radial-gradient syntax. However, the color scale must be defined only in degrees and percentages, not absolute lengths.

They must also be placed around the gradient arc, not on the gradient line that emerges from the center of the gradient.

Syntax - Tapered gradient:

background-image: conic-gradient([angle] [position,] color [degree], color [degree], ...);

The default position and angle are 0 and center respectively.

For example, if you don't specify a degree, the colors of the gradient are evenly distributed around the center point.

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

Conical gradient position

Similar to Radial Gradients, you can also specify the location of the center point in the conical gradient.

The following code example specifies the location of the center point and the degrees 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 of the gradient

The list of colors you define is usually evenly spaced around the circle. To specify the starting angle of the conical gradient, use the from keyword and specify the angle after it.

We can also specify different positions for color stops by adding an angle or length after the color stop. The following example defines an angle for setting the center of a conical 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>

Summarize

We have several options that allow us to set a gradient background. As in all examples, we set the gradient background of a div element.

In a similar pattern, this background can be set using any HTML element, provided it supports the use of background images.

Previous：Rotating text using CSS

Next：Stretchable background images using CSS

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >