CSS 阴影生成器
可视化的 CSS 盒子阴影生成器，支持多层阴影、Tailwind 生成与实时预览。
预览
CSS 代码
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
0px 4px 6px -2px rgba(0, 0, 0, 0.05);Tailwind: shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-2px_rgba(0,0,0,0.05)]
阴影列表
关于此工具
这是一款功能全面的 CSS 阴影设计工具，帮助开发者轻松创建富有层次感的 UI 效果。它突破了简单阴影的限制，允许您在一个元素上叠加无限数量的阴影层。您可以精细调节每一层阴影的水平/垂直偏移、模糊程度、扩散范围以及颜色透明度，甚至切换为内阴影 (Inset)。支持自定义预览框的尺寸与圆角，更真实地模拟实际应用场景。生成的代码支持标准 CSS 与 Tailwind CSS 任意值语法，一键复制，大幅提升开发效率。
功能特点
- 📚 多层叠加：支持在一个元素上添加任意数量的阴影层，创造丰富立体感
- 🎛️ 精细控制：分别调节 X/Y 偏移、模糊半径、扩散半径及内阴影模式
- 📦 Tailwind 支持：自动生成 Tailwind CSS 任意值语法代码
- 📐 盒子调整：支持自定义预览框的宽度、高度及圆角大小
- ✨ 风格预设：内置柔和、硬朗、霓虹、层叠等多种流行阴影风格
- 💻 代码生成：自动生成标准 CSS box-shadow 属性与 Tailwind 代码