CSS设置渐变色从上到下

在网页设计中，渐变色是一种常用的设计元素，可以为网页增添视觉效果，提升用户体验。CSS提供了丰富的渐变色功能，可以通过线性渐变实现颜色从上到下的渐变效果。本文将详细介绍如何使用CSS实现渐变色从上到下的效果。

线性渐变

线性渐变（linear gradient）是CSS中用来创建从一个角度到另一个角度的渐变色效果的一种方式。通过指定起始颜色和结束颜色，可以创建出各种各样的渐变效果。在本文中，我们将通过线性渐变来实现从上到下的渐变效果。

CSS语法

background: linear-gradient(to bottom, color1, color2);

其中，to bottom表示渐变的方向为从上到下，color1和color2分别为起始颜色和结束颜色。

示例代码

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