CSS 渐变与盒阴影：完整视觉指南

CSS 渐变与盒阴影是 Web 开发者工具箱中最强大却又最容易被忽视的两种视觉工具。用得好，它们能为界面增添层次感、视觉秩序与精致感；用得不好，则会让一切看起来像 2009 年的网站。本指南既讲技术原理，也讲设计品味。

CSS 渐变

线性渐变

最常见的渐变类型，颜色沿直线从一端过渡到另一端。

/* 基础从左到右 */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* 对角线方向 */
background: linear-gradient(135deg, #667eea, #764ba2);

/* 多个色标 */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);

/* 带透明度 */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));

/* 硬色标（无过渡混合） */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);

角度可以用度数指定（0deg = 从下到上，90deg = 从左到右），也可以使用关键词（to top、to right、to bottom-right）。

径向渐变

从中心点向外辐射扩散。

/* 圆形渐变 */
background: radial-gradient(circle, #667eea, #764ba2);

/* 椭圆形（默认） */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* 自定义中心位置 */
background: radial-gradient(circle at 30% 40%, #3b82f6, transparent);

/* 聚光灯效果 */
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);

径向渐变非常适合制作聚光灯效果、发光效果和暗角效果。

圆锥渐变

颜色围绕中心点旋转扫描——类似色轮或饼图。

/* 色轮 */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

/* 饼图分段 */
background: conic-gradient(
  #3b82f6 0% 35%,
  #8b5cf6 35% 60%,
  #10b981 60% 80%,
  #f59e0b 80% 100%
);

/* 棋盘格图案 */
background: conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
background-size: 40px 40px;

渐变文字

当下最流行的现代 UI 效果之一：

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

图片上的渐变遮罩

确保照片上文字可读的必备技巧：

.hero {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%),
    url('hero.jpg');
  background-size: cover;
}

使用我们的 CSS Gradient Generator，通过可视化界面构建渐变效果，实时预览，一键复制 CSS 代码。

盒阴影

box-shadow 语法

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

• offset-x / offset-y — 阴影位置（正值 = 右/下）
• blur-radius — 0 = 硬边缘，值越大越柔和
• spread-radius — 正值扩大阴影，负值收缩阴影
• inset — 将阴影绘制在元素内部而非外部

基础阴影

/* 轻微浮起感 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* 卡片阴影 */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);

/* 大型弹窗阴影 */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

/* 硬投影（无模糊） */
box-shadow: 4px 4px 0px #1e293b;

多层阴影

多个阴影可以用逗号叠加，这是实现真实感阴影的关键：

/* Material Design 海拔感 */
box-shadow:
  0 2px 1px -1px rgba(0,0,0,0.2),
  0 1px 1px 0 rgba(0,0,0,0.14),
  0 1px 3px 0 rgba(0,0,0,0.12);

/* 分层营造纵深感 */
box-shadow:
  0 1px 2px rgba(0,0,0,0.07),
  0 2px 4px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 8px 16px rgba(0,0,0,0.07),
  0 16px 32px rgba(0,0,0,0.07);

第二种方式将阴影能量分散到多个层级，形成更自然的深度衰减效果。

内阴影

将阴影绘制在元素内部——非常适合按下状态和输入框：

/* 按钮按下状态 */
button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* 带深度感的输入框 */
input {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

/* 磨砂玻璃内部发光 */
.glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 20px rgba(0,0,0,0.2);
}

彩色阴影

阴影不必总是黑色，彩色阴影能增添活力：

/* 彩色浮起感 */
.btn-primary {
  background: #3b82f6;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* 深色模式发光效果 */
.card {
  background: #1e293b;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}

平滑的阴影过渡

为悬停交互添加阴影动画，带来更好的体验：

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

渐变与阴影的组合运用

最精致的 UI 往往将渐变与阴影结合使用：

.premium-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 6px -1px rgba(0,0,0,0.2),
    0 20px 40px -5px rgba(0,0,0,0.4);
}

.gradient-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
}

.gradient-button:hover {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  transform: translateY(-1px);
}

提升效率的工具

• CSS Gradient Generator — 可视化构建渐变效果，支持多色标、多角度和多种渐变类型，实时预览，一键复制。
• CSS Box Shadow Generator — 叠加多层阴影，自由调整模糊/扩散/颜色，即时获得可用于生产环境的 CSS 代码。
• Color Format Converter — 在 HEX、RGB、HSL 和 RGBA 格式之间互相转换——设置阴影透明度时必不可少。
• Color Palette Generator — 生成互补色、类似色和单色调配色方案，帮助你找到完美的渐变色组合。

渐变与阴影遵循一切优秀设计的共同法则：克制。一个精心设计的阴影或渐变能提升组件的质感，而十几个相互竞争的效果只会造成视觉噪声。掌握这些技巧，然后有目的地使用它们。