CSS 渐变详解：线性、径向与锥形渐变的实战应用

看到没？方向可以用 to 关键字，也可以用 deg 角度。这里有个坑要注意：角度是顺时针算的，0deg 是从下到上（对，不是从左到右，CSS 规范就是这么奇葩），90deg 是从左到右。

所以 45deg 就是从左下角往右上角拉一条线，颜色沿着这条线变化。

多颜色停点：不止两个色，想停哪停哪

/* 彩虹渐变，七个颜色 */
.rainbow {
    background: linear-gradient(to right, red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%);
}
/* 不写百分比，浏览器会自动平均分配 */
.auto-rainbow {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
/* 颜色可以重叠，制造硬边效果 */
.stripes {
    background: linear-gradient(to right, #ff6b6b 0%, #ff6b6b 50%, #4ecdc4 50%, #4ecdc4 100%);
    /* 效果就是左半边红，右半边青，中间没有过渡 */
}

这个百分比叫颜色停点（color stop），意思是到这个位置，必须完全是这个颜色。如果不写，浏览器就会在 0% 和 100% 之间平均分配。

那个条纹效果很有意思吧？红到 50%，青从 50% 开始，中间没有过渡距离，所以就是硬切。用这招可以做进度条背景、loading 条纹，都不用切图。

透明渐变：rgba 和透明通道的妙用

/* 从实色到透明，做遮罩层常用 */
.overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    /* 从顶部 80% 透明度的黑，到底部完全透明 */
}
/* 配合背景图使用，文字可读性更好 */
.hero-section {
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('hero.jpg');
    /* 先画一层半黑半透明，再铺背景图，文字就不会被图干扰 */
}

rgba 最后一个值是 alpha 通道，0 是完全透明，1 是完全不透明。渐变配合透明度，能做很多图层叠加的效果，比直接用 opacity 控制整个元素要精细得多。

实战：做一个会呼吸的按钮

.pulse-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 15px 40px;
    color: white;
    font-size: 16px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
}
.pulse-button:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    /* 悬停时渐变方向反过来，有流动感 */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(118, 75, 162, 0.6);
}
.pulse-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(118, 75, 162, 0.4);
}

看到没？就这一个按钮，用了 135 度斜向渐变，紫蓝配色，加上阴影和位移动画，质感立马就出来了。hover 的时候我把渐变颜色顺序颠倒，用户会感觉颜色在流动，这就是细节。

径向渐变：从中心炸开的光晕美学

如果说线性渐变是一条路走到底，那径向渐变就是从一个点向外爆炸。特别适合做发光效果、球体质感、或者那种中间亮四周暗的聚焦效果。

基础语法：圆心、形状、大小

/* 最简单的，从中心红变蓝 */
.simple-radial {
    background: radial-gradient(red, blue);
    /* 默认是椭圆，适应容器形状 */
}
/* 指定圆形 */
.perfect-circle {
    background: radial-gradient(circle, #ff6b6b, #4ecdc4);
}
/* 指定圆心位置，左上角开始 */
.off-center {
    background: radial-gradient(circle at 20% 30%, #f093fb, #f5576c);
}
/* 指定大小，closest-side 表示刚好碰到最近的边 */
.sized {
    background: radial-gradient(circle closest-side at center, #fff, #000);
}

这里的关键字有点多，咱们掰扯清楚：

• 形状：circle 是正圆，ellipse 是椭圆（默认）
• 圆心：at x y，可以用百分比、像素、或者关键字（center, top, left 等）
• 大小：closest-side（到最近边）、closest-corner（到最近角）、farthest-side（到最远边）、farthest-corner（到最远角，默认）

颜色停点同样适用

/* 做光晕效果，中间白亮，往外变透明 */
.glow {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0) 70%);
}
/* 做球体立体感，高光 + 中间调 + 暗部 + 反光 */
.3d-sphere {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e0e0e0 20%, #808080 50%, #404040 80%, #202020 100%);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

那个 3D 球体的代码值得好好看看。我把高光放在左上角 30% 的位置（模拟光源从左上打过来），然后依次是亮部、灰部、暗部、反光，最后加个投影，一个纯 CSS 画的球就出来了。这招在做拟物化图标、按钮时特别好用。

实战：做一个发光输入框

.input-wrapper {
    position: relative;
    display: inline-block;
}
.glow-input {
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s;
    background: white;
}
/* 用伪元素做光晕，这样不会影响输入框本身的布局 */
.input-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 10px;
    background: radial-gradient(circle at center, rgba(102, 126, 234, 0.6) 0%, rgba(102, 126, 234, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
    filter: blur(8px);
}
.input-wrapper:focus-within::before {
    opacity: 1;
}
/* 聚焦时边框也变色 */
.glow-input:focus {
    border-color: #667eea;
}

这里有个技巧：光晕用伪元素做，并且用 focus-within 控制，这样点击输入框时，外层 wrapper 会触发伪元素显示。filter: blur 让光晕更柔和，不然会显得很假。这种效果在暗色模式下特别好看，像科幻电影里的界面。

别被语法吓跑：咱们拆解一下那些参数

我知道，前面看了那么多代码，你可能有点晕。什么 circle at 30% 30%，什么 closest-side，这都是啥跟啥啊？

其实 CSS 渐变的语法是有规律的，咱们把它拆成公式看：

linear-gradient([方向], [颜色停点 1], [颜色停点 2], ...); 
radial-gradient([形状] [大小] at [位置], [颜色停点 1], ...); 

方向到底怎么算？

线性渐变的方向，你可以理解为一条射线从哪射向哪。

• to right = 0% 在左，100% 在右，颜色从左往右变
• to bottom = 默认，从上往下
• 45deg = 从左下角往右上角，0deg 的位置在底部

这里有个记忆诀窍：角度是终点相对于起点的角度。0deg 是向上（北），90deg 是向右（东），180deg 是向下（南），270deg 是向左（西）。所以 45deg 就是东北方向，也就是从左下往右上。

颜色停点的三种写法

/* 1. 只写颜色，位置自动计算 */
simple {
    background: linear-gradient(red, blue);
    /* 红在 0%，蓝在 100% */
}
/* 2. 颜色 + 百分比，精确控制 */
precise {
    background: linear-gradient(red 20%, blue 80%);
    /* 0-20% 是纯红，20-80% 是渐变，80-100% 是纯蓝 */
}
/* 3. 颜色 + 像素，固定距离 */
fixed {
    background: linear-gradient(red 50px, blue 100px);
    /* 前 50px 纯红，50-100px 渐变，之后纯蓝（如果容器够大） */
}

百分比是相对于渐变线的长度，像素是绝对距离。混着用也行，比如 red, blue 50%, green，意思是红在 0%，蓝在 50%，绿在 100%。

透明度渐变的高级玩法

/* 做玻璃拟态效果（Glassmorphism） */
.glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

玻璃拟态是这两年流行的设计风格，核心就是半透明背景 + 模糊 backdrop。渐变在这里控制的是玻璃本身的明暗变化，让平面看起来有弧度。

多层渐变叠加：背景图能塞好几个？

你可能不知道，background 属性其实可以接受多个值，用逗号隔开。后面的会叠在前面的上面。

/* 两层渐变叠加 */
.layered {
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), linear-gradient(45deg, #ff6b6b, #4ecdc4);
    /* 第一层是半黑遮罩，第二层是彩色渐变 */
    /* 最终效果：彩色渐变上盖了一层半透明黑 */
}
/* 三层：条纹 + 渐变 + 底色 */
.complex {
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px ), linear-gradient(to bottom, #667eea, #764ba2), #1a1a1a;
    /* 最上层是斜条纹，中间是蓝紫渐变，底层是深色备用 */
}

这个技巧非常实用。比如你想做个带纹理的渐变按钮，不用找设计师要图，自己用 repeating-linear-gradient 画条纹，叠在颜色渐变上面，就是独特的质感。

性能会不会崩？

我知道你在担心：这么多层渐变，浏览器渲染会不会卡？

实测告诉你：放心用。现代浏览器对渐变的优化很好，GPU 加速妥妥的。只要不是同时搞十几层还加动画，基本不会成为性能瓶颈。比用图片做背景省流量多了，而且缩放不会失真。

但有个小坑：渐变在动画时，如果改变的是 background-position 或者 background-size，可能会触发重绘。建议用 transform 或者 opacity 做动画，或者给元素加 will-change: transform。

浏览器兼容：Safari 又抽风了？

说到兼容性，咱们得面对现实：IE 已经入土了，但 Safari 时不时还会给你惊喜。

加前缀的日子基本过去了

以前写渐变要这样：

.old-school {
    background: -webkit-linear-gradient(left, red, blue);
    /* Chrome/Safari 老版本 */
    background: -moz-linear-gradient(left, red, blue);
    /* Firefox 老版本 */
    background: -o-linear-gradient(left, red, blue);
    /* Opera 老版本 */
    background: linear-gradient(to right, red, blue);
    /* 标准写法 */
}

现在 2024 年了，除非你要兼容 IE11（真的还有这种需求吗？），否则直接写标准语法就行。Can I Use 上显示，全球 95%+ 的浏览器都支持无前缀的渐变。

Safari 的奇葩 bug

不过 Safari 确实有个历史遗留问题：老版本的 Safari（13 以下）对 deg 单位的解析和其他浏览器相反。但说实话，现在 iOS 都 16+ 了，除非你的用户全是古董机，否则不用管。

真正要注意的是锥形渐变（conic-gradient），这个咱们后面讲，它的兼容性确实差点意思。

优雅降级策略

/* 先给个纯色保底 */
.safe-button {
    background: #667eea;
    /* 纯色兜底 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* 或者用@supports 检测 */
@supports (background: linear-gradient(90deg, red, blue)) {
    .modern-button {
        background: linear-gradient(135deg, #667eea, #764ba2);
    }
}

第一种方法最实用：不支持渐变的浏览器看到第一行，支持的浏览器会覆盖成第二行。渐进增强，稳得很。

实际项目里怎么用才不翻车

理论讲了一堆，咱们看看真实业务场景里，渐变都用在哪。

场景一：登录页的大按钮

登录页的立即登录按钮是转化率的关键，得做得诱人点击。

.login-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    /* 蓝紫渐变，科技感 */
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    /* 微妙的内阴影增加立体感 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 6px rgba(118, 75, 162, 0.3);
    transition: all 0.3s ease;
}
.login-btn:hover {
    /* 悬停时变亮，像被照亮 */
    background: linear-gradient(90deg, #7b8fe8 0%, #8a5cb8 100%);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 12px rgba(118, 75, 162, 0.4);
}
.login-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 2px 4px rgba(118, 75, 162, 0.3);
}

注意我加了 inset 内阴影，这是模拟按钮是凹进去的或者表面有高光的效果。多层阴影用逗号隔开，先写的在上层。

场景二：卡片 hover 抬升效果

.card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
    /* 默认状态：底部淡淡的阴影 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.card:hover {
    transform: translateY(-4px);
    /* 阴影变大变模糊，模拟抬升 */
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    /* 顶部加一条亮色渐变，模拟反光 */
    background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, white 20%);
}

hover 时卡片上移，阴影扩散，同时顶部有个白色渐变——这是模拟光线从上方照下来，卡片抬升后顶部更亮。细节决定成败。

场景三：加载动画

/* 骨架屏的闪烁效果 */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* 进度条 */
.progress-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    width: 60%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    background-size: 200% 100%;
    animation: flow 2s linear infinite;
}
@keyframes flow {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

骨架屏那个 shimmer 效果，原理是背景图（这里是渐变）比容器宽，然后改变 background-position，让高光区域从左扫到右，像扫描仪一样。

进度条用了同样的原理，但颜色是循环的，看起来像在流动。这种细节能让用户感觉系统正在努力工作，减少等待焦虑。

调试技巧：颜色不对？方向反了？咋整？

写渐变最痛苦的是：代码看着对，但效果就是不对。而且浏览器的开发者工具对渐变的支持……怎么说呢，能用，但不好用。

技巧一：用色盲模式看对比度

有时候渐变颜色选得太接近，正常视力的人看着还行，色盲用户就抓瞎了。Chrome DevTools 里有个 Emulate vision deficiencies（模拟视力缺陷），可以看看你的渐变在色盲眼里是啥样。

如果模拟后变成一坨灰，说明对比度不够，得调整颜色。

技巧二：把渐变拆成纯色检查

/* 怀疑渐变方向不对？先改成极端颜色看看 */
.debug {
    background: linear-gradient(to right, red 50%, blue 50%);
    /* 如果是左红右蓝，说明方向对了 */
}

用红蓝这种对比强烈的颜色，并且设置硬切（50% 处直接变），能快速验证方向是否正确。

技巧三：用 CSS 变量方便调试

:root {
    --grad-start: #667eea;
    --grad-end: #764ba2;
    --grad-angle: 135deg;
}
.btn {
    background: linear-gradient(var(--grad-angle), var(--grad-start), var(--grad-end));
}

把颜色、角度都抽成变量，然后在 DevTools 的 Styles 面板里直接改数值，实时预览。比改代码刷新快多了。

技巧四：方向反了？可能是角度理解错了

如果你写 45deg 发现方向跟你想象的不一样，试试 180deg - 45deg = 135deg，或者直接用 to top right 这种关键字，更直观。

骚操作：伪元素 + 渐变=无图实现斜切角

有些设计稿上，按钮或者卡片有个斜切的角，像被刀削过一样。以前这种效果得切图，现在用渐变分分钟搞定。

单斜切角

.beveled-corner {
    background: linear-gradient(135deg, transparent 10px, #667eea 10px);
    /* 135 度方向，前 10px 透明，之后是蓝色 */
    /* 效果：左上角被切掉一个三角形 */
}

原理是：渐变线 135 度（从左上往右下），在 10px 的位置之前都是透明，之后突然变蓝。那个透明到蓝色的转折点，就形成了斜边。

四角都切

.four-corners {
    background: linear-gradient(135deg, transparent 10px, #667eea 10px) top left,
                linear-gradient(225deg, transparent 10px, #667eea 10px) top right,
                linear-gradient(315deg, transparent 10px, #667eea 10px) bottom right,
                linear-gradient(45deg, transparent 10px, #667eea 10px) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

四个角分别用不同的角度切，然后用 background-size: 50% 50% 让每个渐变只占一角，最后 no-repeat 防止铺满。这招做标签、徽章特别酷。

用渐变做分割线

/* 渐变分割线，中间实两边虚 */
.gradient-divider {
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #ccc 20%, #ccc 80%, transparent 100%);
}
/* 或者中间粗两边细 */
.fancy-divider {
    height: 3px;
    background: linear-gradient(to right, transparent 0%, #667eea 20%, #764ba2 50%, #667eea 80%, transparent 100%);
    border-radius: 3px;
}

比单纯的 border-bottom 高级多了，而且不用额外元素，直接给 hr 或者伪元素用就行。

模拟毛玻璃（backdrop-filter 备胎方案）

如果浏览器不支持 backdrop-filter: blur，可以用渐变模拟：

.fake-glass {
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.3));
    border: 1px solid rgba(255,255,255,0.5);
    /* 虽然没有模糊效果，但半透明 + 边框也有点那味儿 */
}

当然，最好还是用 backdrop-filter，这个只是 fallback。

锥形渐变：虽然冷门，但用上了就是大神

conic-gradient 是 CSS 渐变的三弟，前两个兄弟大家都熟，这位因为兼容性（主要是 IE 全系列不支持，Safari14 以下也不支持）和适用场景少，知道的人不多。

但它做某些特定效果，真的是神器。

基础语法：围着中心转

/* 最简单的，像色轮 */
.color-wheel {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    /* 从红色开始，顺时针转一圈，最后回到红色 */
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

和径向渐变的区别：径向是从中心向外，颜色沿着半径变化；锥形是围着中心转，颜色沿着角度变化。

做饼图，不用 SVG 不用 Canvas

.pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        #ff6b6b 0deg 120deg, /* 红色占 0-120 度 */
        #4ecdc4 120deg 250deg, /* 青色占 120-250 度 */
        #45b7d1 250deg 360deg /* 蓝色占 250-360 度 */
    );
}

看到没？每个颜色后面可以跟两个角度，表示从哪开始，到哪结束。用这招做简单的饼图、环形图，纯 CSS 搞定，比引入图表库轻量多了。

做棋盘格背景

.checkerboard {
    background: conic-gradient(#fff 0% 25%, #000 25% 50%, #fff 50% 75%, #000 75% 100%);
    background-size: 50px 50px;
}

锥形渐变配合 background-size，可以做出重复的图案。这个棋盘格就是四个象限交替黑白。

旋转加载器

.loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, #667eea 100%);
    /* from 0deg 表示起始角度 */
    mask: radial-gradient(transparent 60%, black 61%);
    /* 用 mask 挖掉中间，变成环形 */
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

from 0deg 指定从 0 度开始画（默认也是从 0，但显式写出来可以改）。mask 属性把中间 60% 挖透明，剩下的是一个渐变的环，转起来就是 loading 效果。

兼容性处理

.conic-fallback {
    background: #667eea;
    /* 纯色兜底 */
}
@supports (background: conic-gradient(red, blue)) {
    .conic-fallback {
        background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);
    }
}

用 @supports 检测，支持的浏览器用渐变，不支持的用纯色或者找 polyfill。

底层逻辑：颜色插值是怎么算的？

前面都是用，最后咱们聊聊为什么，帮你从抄代码进阶到自由发挥。

颜色空间：sRGB vs LAB

CSS 渐变默认在 sRGB 颜色空间插值。简单说，就是红绿蓝三个通道分别线性过渡。

但人眼对颜色的感知不是线性的。比如从亮红到暗红，sRGB 插值在中间会显得有点灰，不够自然。

未来 CSS 会支持在 LAB 颜色空间插值（现在部分浏览器支持 color-interpolation 属性），那样过渡会更平滑。但目前咱们主要用 sRGB，知道有这么回事就行。

为什么有时候过渡不自然？

/* 这个渐变中间会发灰 */
.grayish {
    background: linear-gradient(to right, red, green);
    /* 红 (255,0,0) -> 绿 (0,255,0) */
    /* 中间是 (128,128,0)，黄绿色，但视觉上偏灰 */
}
/* 加个中间色过渡会好点 */
.better {
    background: linear-gradient(to right, red, yellow, green);
    /* 红->黄->绿，经过色轮上的短路径 */
}

红到绿在色轮上是绕远路（经过黄），直接插值会经过暗区。加黄色作为中间站，走色轮的短路径，看起来就更亮更自然。

这就是为什么做渐变时，有时候需要加中间色，而不是只用首尾两个颜色。

颜色停点的数学

math-example {
    background: linear-gradient(to right, red 20%, blue 80%);
}

渐变线总长度假设为 L。

• 0% 到 20%：纯红色
• 20% 到 80%：红到蓝的过渡，过渡区长度是 0.6L
• 80% 到 100%：纯蓝色

如果两个颜色停点位置相同，比如 red 50%, blue 50%，那就是硬切，没有过渡区。

如果后面的颜色停点比前面的小，比如 red 80%, blue 20%，浏览器会自动排序，变成 blue 20%, red 80%，也就是从蓝变红。

写在最后

CSS 渐变这东西，说简单也简单，就是颜色慢慢变；说复杂也复杂，方向、颜色空间、多层叠加、动画配合，能玩出花来。

但核心就一点：多试。颜色值改改看，角度调调看，在 DevTools 里实时预览，比看十篇文章都强。

记住几个实用的套路：

• 按钮用 135 度或 45 度斜向渐变，加阴影
• 背景用从深到浅的同色系渐变，增加层次感
• 用透明度渐变做遮罩，提升文字可读性
• 多层渐变叠加，做出纹理和质感
• 配合 background-size 和 background-position 做动画

别害怕试错，CSS 又不会像 JavaScript 那样报错卡死。大胆写，大胆改，30 分钟后你会发现，原来那些高级感设计，也不过如此嘛。

最后送你我常用的几个渐变色组合，直接抄：

/* 紫霞仙子 */
.purple-dream {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* 落日余晖 */
.sunset {
    background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
/* 深海恐惧 */
.deep-sea {
    background: linear-gradient(to bottom, #2c3e50, #4ca1af);
}
/* 薄荷糖 */
.mint {
    background: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
}
/* 深夜食堂 */
.midnight {
    background: linear-gradient(to bottom, #232526, #414345);
}

拿去用，不谢。下次产品经理再提要那种很高级的效果，你就微微一笑，打开 VS Code，三分钟给他整出来。