设计

CSS 阴影生成器

可视化生成 box-shadow。

背景: CSS 渐变生成器 · 布局: CSS Flexbox 生成.

使用方法

从预设或单层开始,添加图层营造深度。切换内阴影模式实现按压/新拟态效果。复制逗号分隔值到 box-shadow。

常见问题

能叠加多个阴影吗?

可以——添加图层可将柔和的环境阴影与紧实的接触阴影组合,或叠加彩色光晕。每个图层都有独立的偏移、模糊、扩展、颜色和内阴影开关。

这些预设有什么作用?

一键起点:Stripe 风格卡片层级、新拟态凸起/按压、Material 深度和柔和光晕——应用后可继续调整滑块。

如何使用输出结果?

将 box-shadow 这一行复制到 CSS 中。多个图层以逗号分隔,与浏览器要求的格式完全一致。

最后更新: