前段时间觉得网站一个模块没有背景太光了，想加个背景，又没有找到合适的图片，直接加个颜色也不好看。在找灵感的时候，看到一个网站有种光晕效果:
又发现Next的默认部署首页也运用了类似效果，简洁美观:
最终采用了这种方案，并实现了Next首页渐变样式的demo，本质是给文字添加伪元素，运用渐变与filter的blur效果使之呈现出光晕效果。
codesandbox链接
过程中也学到了conic-gradient的使用方式，于是总结了CSS 提供的三种渐变类型：线性渐变（Linear Gradients）、径向渐变（Radial Gradients）和圆锥渐变（Conic Gradients），作为记录。
1. 线性渐变（Linear Gradients）
线性渐变沿一条直线逐渐变化颜色。它是最基本也最常用的渐变类型。
语法
element {
background: linear-gradient([angle or direction], color-stop1, color-stop2, ...);
}
- 角度：可以指定一个角度（如
45deg）。 - 方向：或者使用关键词，如
to top,to bottom,to left,to right。 - 颜色停靠点：定义渐变中使用的颜色和它们在渐变中的位置。
示例
body {
background: linear-gradient(to bottom, transparent, white);
}
此为demo的灰色背景色。渐变从顶部的透明色过渡到底部的白色（rgb(255, 255, 255)），并且有一个固体底色（rgb(214, 219, 220)），这是一种浅灰色。
这样设置后，body 元素将有一个从透明到白色的垂直渐变背景，底层颜色为浅灰色。
2. 径向渐变（Radial Gradients）
径向渐变从原点向外逐渐变化颜色，可以创建一种向外发散的效果，是从一个点向外扩散的渐变。
语法
element {
background: radial-gradient([shape] [size] at [position], color-stop1, color-stop2, ...);
}
- 形状：如
circle或ellipse。 - 大小：如
closest-side,farthest-corner。 - 位置：渐变的中心点，如
at center。
示例
div::before {
radial-gradient(circle, white, transparent);
}
这里给文字的before创建了一个径向渐变，其形状是圆形，从中心的白色渐变到透明的伪元素。这种渐变效果通常用于创建聚光灯效果或柔和的背景。
3. 圆锥渐变（Conic Gradients）
圆锥渐变沿着圆形路径变化颜色，类似于色盘或饼图。
锥形渐变语法与径向渐变语法类似，但色标放置在渐变圆弧（圆的周长）周围，而不是从渐变中心出现的渐变线上。使用锥形渐变时，颜色会围绕圆心旋转，从顶部开始顺时针旋转。在径向渐变中，颜色从椭圆中心向各个方向向外过渡。
与线性渐变和径向渐变不同，线性渐变和径向渐变的色标是通过长度指定的，而锥形渐变的色标是通过角度指定的。单位包括角度
deg、梯度 grad、弧度 rad 和整圈的 turn。
语法
element {
background: conic-gradient(from [angle] at [position], color-stop1, color-stop2, ...);
}
- 角度：设置开始的角度，如
from 0deg。 - 位置：渐变的中心点，通常是
at center。
示例
div::after {
background: conic-gradient(#bae6fd, #bfdbfe);
}
伪元素有一个圆锥形的背景渐变，颜色从浅蓝#bae6fd到蓝色#bfdbfe。
小结
在复杂的设计中，这些渐变可以结合使用，以创造更丰富和动态的视觉效果。例如，线性渐变可以用作背景，径向渐变可以用来突出显示特定元素，而圆锥渐变则可以用于创造有趣的图形效果。
