CSS 渐变的三种类型：线性渐变（linear-gradient）、径向渐变（radial-gradient）和锥形渐变（conic-gradient）。内容包括基础语法、方向控制、颜色停点设置、透明度处理及多层叠加技巧。通过登录页按钮、卡片悬停效果、加载动画等实际场景演示了渐变的应用方法。此外，还涵盖了浏览器兼容性处理、调试技巧以及颜色插值底层逻辑，帮助开发者掌握如何利用纯 CSS 实现高级视觉效果，无需依赖图片资源。
说实话，刚学前端那会儿，看到那些花里胡哨的渐变按钮，第一反应是这肯定是用 Photoshop 切的图吧？结果后来看人家代码，发现全是纯 CSS 写的，原来 background: red 后面还能跟这么多戏。
今天咱们就聊聊这个让页面从城乡结合部秒变北欧极简风的神器：CSS 渐变。不用背那些枯燥的语法，把这玩意儿彻底整明白。
先灵魂拷问一下：你是不是还在用那种纯色的 #007bff 按钮？就是那种蓝得发慌、方方正正、鼠标放上去除了变个 cursor 啥反应都没有的按钮？
别不承认，我见过太多功能没问题但看着就廉价的项目了。客户爸爸拿着参考图过来说要这种高级感，你一看，好家伙，人家按钮有光影流动，你的按钮像贴了一块蓝胶布。
其实差距往往就在一个渐变。纯色是平面的，渐变是立体的；纯色是静止的，渐变是有生命力的。人眼天生就对光影变化敏感，这是几百万年进化出来的本能——看到圆润的光影就觉得舒服，看到生硬的色块就觉得警惕。
所以啊，学会渐变不是为了炫技，是为了让你的页面看起来贵一点。真的，同样一个按钮，加个渐变，报价都能多要 20%。
简单来说，渐变就是颜色慢慢变。从红变橙，从深变亮，从中心往外扩散……CSS 帮我们把这些过渡自动计算好了，不用你准备几十张渐变的图片来回切换。
早年没有 CSS 渐变的时候，前端们是真的惨。要做个渐变背景？切一张 1px 宽的图，然后 repeat-x 或者 repeat-y。要是渐变方向斜着的？那得切整张图，文件体积直接爆炸。而且改个颜色？找设计师重新导出吧您嘞。
现在好了，CSS3 直接内置了三种渐变：
咱们一个一个唠，保证你听完后能上手就写，而不是去网上抄代码还看不懂。
linear-gradient 是最常用的，咱们先从最基础的聊起。
/* 从红变蓝，默认从上到下 */
.fancy-button {
background: linear-gradient(red, blue);
}
就这么简单，两个颜色，中间用逗号隔开。浏览器会自动帮你算：顶部是红色，底部是蓝色，中间是红蓝混合的过渡色。
但默认从上到下太无聊了，咱们得学会控制方向。
/* 从左到右 */
.left-to-right {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
}
/* 从左上到右下 */
.diagonal {
background: linear-gradient(to bottom right, #f093fb 0%, #f5576c 100%);
}
/* 用角度，45 度斜角 */
.angled {
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
}
/* 负角度也行，从右上往左下 */
.weird-angle {
background: linear-gradient(-45deg, #12c2e9, #c471ed, #f64f59);
}
看到没？方向可以用 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 条纹，都不用切图。
/* 从实色到透明，做遮罩层常用 */
.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: ();
: (, , , );
}
看到没？就这一个按钮，用了 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);
}
这里的关键字有点多，咱们掰扯清楚：
/* 做光晕效果，中间白亮，往外变透明 */
.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: ();
}
{
: ;
}
{
: ;
}
这里有个技巧：光晕用伪元素做，并且用 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。
说到兼容性，咱们得面对现实：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 确实有个历史遗留问题：老版本的 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(-);
: inset (,,,), (, , , );
}
{
: ();
: inset (,,,), (, , , );
}
注意我加了 inset 内阴影，这是模拟按钮是凹进去的或者表面有高光的效果。多层阴影用逗号隔开，先写的在上层。
.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;
}
flow {
{ : ; }
{ : - ; }
}
骨架屏那个 shimmer 效果，原理是背景图（这里是渐变）比容器宽，然后改变 background-position，让高光区域从左扫到右，像扫描仪一样。
进度条用了同样的原理，但颜色是循环的，看起来像在流动。这种细节能让用户感觉系统正在努力工作，减少等待焦虑。
写渐变最痛苦的是：代码看着对，但效果就是不对。而且浏览器的开发者工具对渐变的支持……怎么说呢，能用，但不好用。
有时候渐变颜色选得太接近，正常视力的人看着还行，色盲用户就抓瞎了。Chrome DevTools 里有个 Emulate vision deficiencies（模拟视力缺陷），可以看看你的渐变在色盲眼里是啥样。
如果模拟后变成一坨灰，说明对比度不够，得调整颜色。
/* 怀疑渐变方向不对？先改成极端颜色看看 */
.debug {
background: linear-gradient(to right, red 50%, blue 50%);
/* 如果是左红右蓝，说明方向对了 */
}
用红蓝这种对比强烈的颜色，并且设置硬切（50% 处直接变），能快速验证方向是否正确。
: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: 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;
}
和径向渐变的区别：径向是从中心向外，颜色沿着半径变化；锥形是围着中心转，颜色沿着角度变化。
.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。
前面都是用，最后咱们聊聊为什么，帮你从抄代码进阶到自由发挥。
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。
如果两个颜色停点位置相同，比如 red 50%, blue 50%，那就是硬切，没有过渡区。
如果后面的颜色停点比前面的小，比如 red 80%, blue 20%，浏览器会自动排序，变成 blue 20%, red 80%，也就是从蓝变红。
CSS 渐变这东西，说简单也简单，就是颜色慢慢变；说复杂也复杂，方向、颜色空间、多层叠加、动画配合，能玩出花来。
但核心就一点：多试。颜色值改改看，角度调调看，在 DevTools 里实时预览，比看十篇文章都强。
记住几个实用的套路：
别害怕试错，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，三分钟给他整出来。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online