构建单层或多层 CSS 阴影,支持实时预览和片段下载。
为卡片、对话框和内容区域生成可用于生产的 CSS 盒阴影值,并在设计交接前验证模糊、扩散和不透明度组合。
它从视觉控件生成有效的盒子阴影声明,以便您可以快速迭代,而无需手动试错。
它支持设计令牌和组件库中使用的现代深度系统的多层阴影合成。
它帮助团队在一个可重复的工作流程中标准化悬停、焦点和静止状态的高程行为。
基础层
x: 0,y:8,模糊:24,扩散:-8,颜色:rgba(15,23,42,0.24)
软层
x:0,y:2,模糊:6,扩散:0,颜色:rgba(15,23,42,0.12)
插入样本
inset 0 1px 0 rgba(255,255,255,0.35)
单阴影
box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.24);
分层阴影
box-shadow: 0 8px 24px -8px rgba(15,23,42,0.24), 0 2px 6px rgba(15,23,42,0.12);
Token 注意
将批准的值存储为语义化令牌,例如 --shadow-surface-md 和 --shadow-surface-lg。
阴影在黑暗背景上看起来很模糊
降低不透明度并调整扩散以保持边缘可读。
模糊半径导致剪裁
增加容器溢出区域或减少受约束布局的模糊。
无意中混合插入和开始
验证每个层顺序以及是否需要插入。
悬停状态跳转过于激进
使用动画阴影标记轻松过渡和较小的增量步骤。
CSS 盒阴影生成器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
我可以在这里创建多层阴影吗?
是的。多层输出对于现代 UI 表面上的真实深度很有用。
我应该对所有阴影使用扩散吗?
不一定。Spread 适合做柔和扩展,但很容易显得过重。
如何使阴影与设计工具匹配?
直接映射偏移、模糊、扩散和 Alpha 值,然后检查浏览器渲染。
阴影会影响性能吗?
会。大范围模糊阴影在低端设备上可能开销较高,因此应在移动设备上测试厚重图层。