前言
总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果，通过调整渐变类型和设置，你可以轻松实现从简单到复杂的各种背景效果。
在日常开发中 有很多需要用到渐变的地方，这片文章来总结一下
来看MDN是如何说的
CSS 渐变 由 `
一共有三种类型的渐变
线性渐变:linear-gradient()创建
线性渐变 是最常见的一种渐变方式，它沿着指定的轴线从一种颜色过渡到另一种颜色。你可以控制渐变的方向、颜色停留点和渐变的角度，创造出各种效果，例如从左到右、从上到下或对角线方向的渐变。
css
* 渐变轴为 45 度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
* 渐变轴为 45 度，从蓝色渐变到透明*/
linear-gradient(45deg,blue,transparent)
linear-gradient(45deg,blue,rgba(0,0,0,0))
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 蓝色渐变到红色再渐变到黄色 */
linear-gradient(to left top, blue, red,yellow);
/* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
/* 色标：从下到上，从蓝色开始渐变，到高度 200px 位置是绿色渐变开始，最后以红色结束 */
linear-gradient(0deg, blue, green 200px, red);
/* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */
linear-gradient(.25turn, red, 10%, blue);
/* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);径向渐变:radial-gradient()创建
径向渐变 从一个中心点向外扩展，逐渐过渡到其他颜色。你可以设置渐变的形状、大小以及中心点的位置，来实现从中心向外的渐变效果，这种效果常用于创建深度感和立体感。
css
/* 在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)
/*65% 300px: 这是渐变的尺寸和位置设置。
65% 表示渐变的形状或大小，通常是相对于容器的宽度或高度的百分比。在这个例子中，它表示渐变的结束点距离渐变中心 65% 的位置。
300px 指渐变的半径，即从中心点到渐变的边缘的距离。
at right top: 这是渐变的起始位置。right top 表示渐变的中心点位于容器的右上角。 */
radial-gradient(60% 100px at left top, red 0, blue, green 100%) 锥形渐变:conic-gradient()创建
没怎么使用过 本文不做展开
B站渐进色背景实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.layout{
width:100vw;
min-height:100vh;
background:
linear-gradient(to bottom,transparent -100px, #fff 300px),
linear-gradient(to right ,#D2EEF9,#FFD1DE)
;
}
</style>
</head>
<body>
<div class="layout"></div>
</body>
</html>boss直聘渐变色
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.layout{
width:100vw;
min-height:100vh;
background:
linear-gradient(to bottom,transparent, #fff 300px),
radial-gradient(90% 300px at left top, #95E0DC, transparent),
radial-gradient(65% 300px at right top, #D3CBFC, transparent)
;
}
</style>
</head>
<body>
<div class="layout"></div>
</body>
</html>本文到此结束 更多作为自我学习 也希望对你有所帮助 会持续更新代码文章 点个赞吧