CSS sets gradient color from top to bottom
CSS Setting Gradient Color from Top to Bottom
In web design, gradients are a common design element that add visual appeal and enhance the user experience. CSS provides a rich set of gradient functions, including linear gradients, which can create a gradient effect from top to bottom. This article will detail how to use CSS to create a gradient effect from top to bottom.
Linear Gradient
A linear gradient is a method used in CSS to create a gradient effect from one angle to another. By specifying starting and ending colors, a variety of gradient effects can be created. In this article, we’ll use a linear gradient to create a gradient effect from top to bottom.
CSS syntax
background: linear-gradient(to bottom, color1, color2);
Where to bottom indicates the gradient direction is from top to bottom, color1 and color2 are the starting and ending colors, respectively.
Example code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient from Top to Bottom</title>
<style>
.gradient {
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
Gradient Direction
In addition to top to bottom, CSS provides a variety of gradient direction options, allowing you to set different gradient effects according to your needs.
to top: From bottom to topto left: From right to leftto right: From left to rightto bottom left: From top right to bottom leftto bottom right: From top left to bottom rightto top left: From bottom right to top leftto top right: From bottom left to top right
Terminal
Through this article, I believe you’ve learned how to use CSS to create a gradient effect from top to bottom. Gradients are a commonly used element in web design, adding visual depth and beauty to a page.