◻ 一个工具箱,
完成所有设计任务

阴影生成器

交互式阴影生成器,支持多层叠加、实时Canvas预览和CSS输出。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

◻ 阴影生成器

阴影指南

盒阴影通过模拟光照和高度来为UI元素增加深度。

调整水平偏移、垂直偏移、模糊、扩散、颜色和不透明度。

专业提示

常见问题

Q: 我应该使用多少个盒子阴影层?
我应该使用多少个盒子阴影层?专业设计通常使用 2-4 层来实现深度。从一个小的紧密阴影开始,添加一个中等散布的阴影,然后可以选择添加一个大的环境阴影。该工具支持无限层。
Q: box-shadow 对性能有什么影响?
box-shadow 对性能有什么影响?一些盒子阴影的影响可以忽略不计。过多的模糊阴影会影响低端设备上的滚动性能。该工具会显示实时预览,以便您在复制之前进行判断。
Q: 我可以创建内部阴影(插图)吗?
我可以创建内部阴影(插图)吗?当前版本侧重于外部阴影。对于内部阴影,请手动将“inset”关键字添加到生成的 CSS box-shadow 值的开头。