CSS投影生成器

当需要为卡片、按钮、图标或文字添加真实感阴影时，CSS投影生成器通过可视化滑块调整色相、饱和度、亮度，一键输出低、中、高三个层级的多层阴影CSS变量，避免手动调参的塑料感。

核心功能：三层阴影预设与实时调参

工具围绕Oomph（力度）、Crispy（清晰度）、Light Position（光源方向）、Background Color（背景色）、Tint Shadow（色调染色）五个滑块展开，实时预览区同步更新。生成器默认输出低、中、高三个海拔的阴影代码，每个海拔由2至8层box-shadow叠加而成，直接复制为CSS自定义属性（--shadow-elevation-low/medium/high），方便在项目中统一调用。

• Oomph滑块：控制阴影的扩散程度，值越高阴影越松散
• Crispy滑块：调节阴影边缘锐利度，值高则边缘清晰
• Light Position：模拟光源角度，影响阴影偏移方向
• Tint Shadow：将阴影染上背景色的互补色，增强色彩融合
• Resolution滑块：调整阴影层级的精细度，值越高层数越多

输出结果：即用型CSS变量与多层叠加逻辑

生成的代码以:root { --shadow-color: ... }定义基础色相，再分别输出三个海拔的阴影堆叠。低海拔（2层）适合小元素如按钮；中海拔（4层）用于卡片；高海拔（8层）模拟漂浮或弹窗。每层阴影均使用hsl(var(--shadow-color) / alpha)语法，保持色调统一。

• 低海拔阴影：2层叠加，偏移小、模糊小，模拟紧贴表面的硬阴影
• 中海拔阴影：4层叠加，兼顾环境光散射与直射投影
• 高海拔阴影：8层叠加，从0.3px到25px偏移，模拟远距离柔光
• 复制按钮：一键将代码写入剪贴板，无需手动选取

作者背景与内容生态

该工具由Josh W. Comeau开发，他是一位资深前端工程师，曾任职于Gatsby、DigitalOcean和Khan Academy，并出版付费课程《CSS for JS Developers》《The Joy of React》。其博客以交互式教程闻名，阴影生成器配套有详细博文解释多层阴影的物理原理。

• 作者Josh W. Comeau：2007年开始Web开发，现为独立开发者
• 开源贡献：维护use-sound和react-flip-move，月下载量约60万次
• 博客定位：面向前端开发者的友好教程，涵盖CSS、React、动画、SVG
• 邮件订阅：不定期发送独家内容，可免费订阅

与同类工具的差异

相比CSSTools.io、365工具箱等通用CSS生成器，本工具专注阴影的物理真实感，不提供渐变、边框、动画等其他功能。它不依赖预设模板（如Material或Neumorphism），而是通过Oomph/Crispy等抽象参数让用户自由调节，输出结果直接以CSS变量组织，适合需要统一设计令牌的项目。

• 专注阴影：仅生成box-shadow，不涉足text-shadow或drop-shadow
• 无预设模板：不内置Material/Neumorphism等固定样式，强调参数化调节
• CSS变量输出：直接生成--shadow-elevation-*变量，便于主题化
• 教学属性：每个参数均有交互式演示和博文解释，非纯工具

常见问题

Q1：CSS投影生成器生成的阴影代码如何应用到项目中？

A1：复制生成的:root { ... }代码块到全局CSS文件中，然后在需要阴影的元素上使用box-shadow: var(--shadow-elevation-low)（或medium/high）。阴影颜色由--shadow-color统一控制，修改该变量即可全局调整色调。

Q2：Oomph和Crispy滑块分别控制什么？

A2：Oomph（力度）影响阴影的扩散程度，值越高阴影越向外散开、边缘越柔和；Crispy（清晰度）控制阴影边缘的锐利度，值高则阴影边缘清晰，值低则模糊。两者结合可模拟从硬质塑料到柔软织物的不同材质阴影。

Q3：这个工具支持text-shadow或drop-shadow吗？

A3：不支持。该生成器仅输出box-shadow代码，专为矩形元素（卡片、按钮、弹窗）设计。如需文字阴影或跟随透明PNG轮廓的drop-shadow，建议使用CSSTools.io或365工具箱中的专用工具。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。