CSS 开发者工具：生成渐变、阴影、转换单位及检查无障碍性
基于浏览器的 CSS 工具实战指南——可视化构建渐变和盒阴影、在 px/rem/em 之间转换、检查 WCAG 颜色对比度、生成调色板，以及将 CSS 转换为 Tailwind 类。
CSS 既是前端开发中最直观的部分，也是最繁琐的部分之一。手动调整十六进制值和角度来构建渐变效率低下，计算两种颜色之间的 WCAG 对比度需要复杂运算，将 px 值转换为 rem 还需要了解根字体大小。这些任务本应在几秒内完成——借助正确的工具，确实可以做到。
下面介绍一系列专注于 CSS 的浏览器工具，帮你彻底消除猜测与试错。
1. CSS 渐变生成器
手写渐变 CSS 相当痛苦。linear-gradient(135deg, #667eea 0%, #764ba2 100%) 语法理解起来还算清晰，但通过可视化方式调整角度、颜色断点和位置，效率要快得多。
我们的 CSS 渐变生成器 支持：
- 线性渐变 — 设置角度，在任意位置添加颜色断点
- 径向渐变 — 圆形或椭圆形，可控制中心位置
- 多个颜色断点 — 按需添加任意数量的渐变断点
- 实时预览 — 修改任意值时全宽预览即时更新
输出示例：
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
实用技巧：
- 使用低透明度断点（带 alpha）创造磨砂玻璃效果
- 将渐变角度设置为与布局对角线一致，打造现代倾斜感
- 制作微妙背景时，保持颜色断点低饱和度、高亮度
2. CSS 盒阴影生成器
盒阴影比渐变更难掌握。语法为 offset-x offset-y blur spread color inset——要叠加多层阴影以实现真实的立体感，需要同时协调所有这些参数。
我们的 CSS 盒阴影生成器 支持：
- 添加多层阴影 — 可视化地叠加
- 在真实卡片元素上查看实时预览
- 为每一层单独切换
inset，实现按压/凹刻效果 - 为每一层独立调整模糊值、扩散值、偏移量和颜色
经典阴影样式：
/* 柔和浮动卡片 */
box-shadow:
0 1px 3px rgba(0,0,0,.12),
0 4px 12px rgba(0,0,0,.08);
/* 深层浮起（模态框）*/
box-shadow:
0 4px 6px rgba(0,0,0,.05),
0 10px 15px rgba(0,0,0,.1),
0 20px 25px rgba(0,0,0,.06);
/* 彩色发光（按钮）*/
box-shadow: 0 4px 15px rgba(99,102,241,.4);
/* 内嵌（按压状态）*/
box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
多层叠加是实现真实阴影的秘诀——单层阴影看起来扁平而生硬，而两到三层不同尺度的阴影则能营造出自然的层次感。
3. CSS 单位转换器：px ↔ rem ↔ em ↔ vw
CSS 有着令人困惑的单位体系。弄清何时使用哪种单位，以及在它们之间进行转换，是前端开发者的日常任务。
我们的 CSS 单位转换器 支持以下单位之间的相互转换：
| 单位 | 相对于 |
|---|---|
px |
绝对像素 |
rem |
根字体大小（默认 16px） |
em |
父元素字体大小 |
pt |
打印点（1pt = 1.33px） |
cm / mm |
物理长度 |
vw / vh |
视口宽度 / 高度 |
% |
父元素尺寸 |
可调整参数：
- 根字体大小 — 从 16px 修改以匹配你的
html { font-size }设置 - 父元素字体大小 — 用于
em计算 - 视口尺寸 — 用于
vw/vh计算
各单位的使用场景：
rem用于字体大小——可随用户浏览器无障碍设置缩放px用于边框、阴影等不应随之缩放的细节em用于应随组件自身文字大小缩放的内外边距vw/vh用于全屏布局和首屏区域%用于容器内的响应式宽度
4. 颜色对比度检查器：WCAG 无障碍性
在你的显示器上看起来没问题的颜色，可能仍然无法通过 WCAG 无障碍标准——这意味着低视力用户、色盲用户或使用老旧屏幕的用户可能无法清晰阅读你的内容。
我们的 颜色对比度检查器 计算前景色与背景色之间的对比度，并显示每个 WCAG 级别的通过/未通过状态：
| 级别 | 所需比率 | 适用范围 |
|---|---|---|
| AA（普通文本） | 4.5:1 | 正文、段落 |
| AA（大号文本） | 3:1 | 18px 以上或 14px 以上粗体 |
| AAA（普通文本） | 7:1 | 增强无障碍性 |
| AAA（大号文本） | 4.5:1 | 增强无障碍性，大号文本 |
常见问题颜色组合：
白底浅灰文字：#999 on #fff → 比率 2.85:1 ❌ 未通过 AA
白底中灰文字：#767 on #fff → 比率 4.48:1 ⚠ 勉强未通过
白底深灰文字：#595 on #fff → 比率 5.74:1 ✅ 通过 AA
检查器会显示文字在背景上的实时预览，让你直观感受用户的实际体验，而不仅仅是数字。
修复不达标颜色组合的快速方法：
- 加深文字颜色（而非提亮背景——那样会降低对比度）
- 增大字体尺寸以符合"大号文本"标准（门槛更低）
- 在图片上方文字下添加半透明深色遮罩层
5. 调色板生成器
从单一品牌色设计一套完整、统一的色彩系统，需要掌握色彩理论知识。我们的 调色板生成器 可以从任意基础色生成四种和谐调色板：
互补色： 色轮上的对立颜色。营造鲜明的高对比搭配，适合用于 CTA 按钮。
相近色： 色轮上相邻的三种颜色。营造和谐、低张力的调色板，适合用于背景和内容区域。
三等分色： 色轮上均匀分布的三种颜色。营造动感、平衡的调色板，适合用于数据可视化。
单色调： 单一色相的淡色和深色变体。营造精致、专业的调色板，适合用于深色模式/浅色模式配对。
每种调色板均附带十六进制代码、RGB 值和可直接复制的 CSS 自定义属性名称。
6. 颜色格式转换器：HEX ↔ RGB ↔ HSL
设计工具输出 HEX 格式的颜色，CSS 有时需要 RGB 格式用于 rgba()，有些设计师使用 HSL 格式。我们的 颜色格式转换器 可在所有格式之间即时转换：
#6366f1
↕
rgb(99, 102, 241)
↕
hsl(239, 84%, 67%)
↕
hsb(239, 59%, 95%) ← Photoshop/Figma HSB
HSL 格式通常最为实用的原因：
hsl(H, S%, L%)将色相、饱和度和亮度分离- 创建颜色的更亮版本：增加
L% - 创建更深版本：降低
L% - 降低饱和度：减少
S% - 以编程方式创建淡色和深色变体极为简便
7. Tailwind CSS 转换器：CSS ↔ Tailwind
如果你正在将项目迁移至 Tailwind，或与编写 CSS 的设计师合作并需要翻译成工具类，我们的 Tailwind CSS 转换器 支持双向转换。
CSS → Tailwind：
/* 输入 */
.card {
display: flex;
flex-direction: column;
padding: 1rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
<!-- 输出 -->
<div class="flex flex-col p-4 rounded-lg bg-white shadow-sm">
Tailwind → CSS： 反向转换——当你需要了解某个 Tailwind 类实际效果，或将样式提取至组件样式表时非常实用。
8. 颜色选择器：从任意颜色获取 HEX、RGB 和 HSL
如需选取特定颜色并同时获取所有格式的值，我们的 颜色选择器 提供完整的色轮与饱和度/亮度选择器，并实时输出结果。
与只能在开发者工具内部使用的浏览器内置颜色选择器不同，这款工具随时可用，让你按需以任意格式复制颜色值。
整合运用：CSS 工作流程
以下是使用上述工具的典型设计到代码工作流程：
- 使用 颜色选择器 选定品牌色
- 使用 调色板生成器 生成完整调色板——获取互补色和单色调变体
- 使用 颜色对比度检查器 检查每组文字/背景颜色组合是否符合 WCAG 标准
- 按需使用 颜色格式转换器 在 HEX/RGB/HSL 之间转换
- 使用 CSS 渐变生成器 构建组件背景
- 使用 CSS 盒阴影生成器 为卡片和模态框添加层次感
- 使用 CSS 单位转换器 将设计稿单位（px）转换为无障碍 CSS 单位（rem）
- 如果项目使用工具类，使用 Tailwind 转换器 转换为 Tailwind
每个步骤不超过一分钟。从品牌色到生产就绪的 CSS，整个工作流程所花费的时间甚至少于一次 Stack Overflow 搜索。