CSS gradient from top to bottom
CSS Gradient from Top to Bottom
In web design and development, gradient is one of the most common effects. By using CSS, we can easily add various gradient effects to web elements, such as color gradients and transparency gradients. This article will focus on how to create a top-to-bottom gradient effect, where the background color of an element gradually changes vertically.
How to Implement
To create a top-to-bottom gradient effect, we can use the CSS linear-gradient property. A linear gradient allows us to smoothly transition colors in a single direction, creating a gradient effect. The following is the specific implementation method:
.gradient {
background: linear-gradient(to bottom, #ffffff, #000000);
}
In the above code, we add a linear gradient to the background color of an element with the class name .gradient. linear-gradient is a CSS function used to achieve a linear gradient effect. to bottom indicates that the gradient moves from top to bottom, and #ffffff and #000000 indicate the starting and ending colors of the gradient, respectively.
Sample Code
Here’s an example using the above code, showing a white to black gradient effect from top to bottom:
<!DOCTYPE html>
<html Tutorial">html>
<head>
<style>
.gradient {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, #ffffff, #000000);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
In this example, we create a <div> element with a width and height of 200px and add the .gradient class to it, giving it a gradient effect from white to black from the top to the bottom. When the browser loads this page, we can see that the background color of the <div> element shows a smooth gradient effect.
More Effects
Beyond the simple top-to-bottom gradient effect, we can also create more diverse effects by adjusting the gradient angle and number of colors. For example, we can create a diagonal gradient from the upper left to the lower right, or a radial gradient that spreads outward from the center. Here are some example codes:
Diagonal Gradient
.gradient {
background: linear-gradient(to bottom right, #ffffff, #000000);
}
Radial Gradient
.gradient {
background: radial-gradient(circle, #ffffff, #000000);
}
Multicolor Gradient
.gradient {
background: linear-gradient(to bottom, #ffffff, #ff0000, #00ff00, #0000ff, #000000);
}
By flexibly using different parameters and color combinations, we can create a variety of cool gradient effects, making web pages look more beautiful and eye-catching.
Summary
In this article, we introduced how to use the CSS linear gradient property to create a gradient effect from top to bottom.