CSS 阴影生成器：从单层到多层叠加的艺术

box-shadow 的六个参数

先来拆解一下语法：

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

六个参数，除了 inset 可选，其他都可以排列组合：

inset：内阴影，默认是外阴影
x-offset：水平偏移，正值向右
y-offset：垂直偏移，正值向下
blur：模糊半径，值越大越模糊
spread：扩展半径，正值扩大阴影，负值缩小
color：颜色，支持 hex、rgba、hsla

最容易被忽略的是 spread。很多人以为阴影只能往外扩，其实负值可以让阴影缩小，这在做一些微妙效果时很有用。

为什么好的阴影都要多层？

看看 Apple 官网的卡片阴影：

/* 看起来是一个阴影，实际是三层 */
box-shadow:
  0 0 0 1px rgba(0,0,0,0.05),    /* 微妙的边框效果 */
  0 2px 4px rgba(0,0,0,0.1),      /* 近处的硬阴影 */
  0 8px 16px rgba(0,0,0,0.1);     /* 远处的软阴影 */

分层的原因是模拟真实光线：

近处阴影：偏移小、模糊小、颜色深 → 光源近
远处阴影：偏移大、模糊大、颜色淡 → 光源远
边缘描边：模糊为 0 的阴影可以当边框用，比 border 更灵活

这种叠加能让卡片看起来"浮"在背景上，而不是贴着。

用 JavaScript 实现多层阴影生成器

核心逻辑其实就是一个数组管理：

interface ShadowLayer {
  id: string
  offsetX: number
  offsetY: number
  blur: number
  spread: number
  color: string
  inset: boolean
}

function generateShadowCSS(layers: ShadowLayer[]): string {
  return layers
    .map(l => `${l.inset ? 'inset ' : ''}${l.offsetX}px ${l.offsetY}px ${l.blur}px ${l.spread}px ${l.color}`)
    .join(', ')
}

用户可以动态添加/删除层，每层独立控制所有参数。最终生成的 CSS 用逗号连接：

box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);

几个实用技巧

1. 阴影做边框

当元素有 border-radius 时，border 会显得生硬。用阴影模拟边框更自然：

.card {
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

好处是阴影会跟着圆角走，不会出现直角边框。

2. 内阴影做凹陷效果

.input:focus {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

输入框聚焦时加个内阴影，视觉上像"按下去"的感觉。

3. 多色阴影做霓虹效果

.neon {
  box-shadow:
    0 0 10px #ff00de,
    0 0 20px #ff00de,
    0 0 40px #ff00de,
    0 0 80px #ff00de;
}

多层同色阴影叠加，模糊半径递增，就能做出霓虹灯效果。

颜色透明度的重要性

阴影颜色几乎都用 rgba，很少用纯黑色。原因是真实世界没有纯黑的阴影，都是带环境色的。

透明度的选择也有讲究：

淡阴影：rgba(0,0,0,0.05) ~ 0.1 → 高光环境、白色背景
中等阴影：rgba(0,0,0,0.15) ~ 0.25) → 普通卡片、按钮
深阴影：rgba(0,0,0,0.3) ~ 0.5) → 模态框、弹窗

Tailwind CSS 的阴影灰度就是这样设计的，淡灰为主，避免突兀。

性能小坑

box-shadow 会触发重绘，大面积多层阴影可能影响性能。几个建议：

避免动画阴影：不要在 transition 里动画 box-shadow，用 transform: scale() 模拟
减少层数：3-4 层足够，再多肉眼也分不清
will-change：对固定阴影元素加 will-change: box-shadow 提前告知浏览器

.card:hover {
  will-change: box-shadow;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

在这里插入图片描述

工具推荐

基于这些原理做了个在线工具：CSS 阴影生成器

特点：

多层阴影叠加，支持增删层
实时预览效果
一键复制 CSS 代码
支持内阴影模式

不用手写 CSS，拖拖滑块就能调出想要的阴影效果。调好后直接复制代码，粘贴到项目里用。

相关工具：边框生成器 | 按钮生成器