CSS Box Shadow Generator
本地产品组织方式,在浏览器本地可视化调节 box-shadow 参数,实时预览卡片阴影并复制 CSS 代码。
CSS Box Shadow Generator
CSS Box Shadow Generator 可在浏览器本地可视化调节 box-shadow 的水平位移、垂直位移、模糊半径、扩散半径、透明度与 inset 参数,并实时预览卡片或按钮的阴影效果。
如何使用?
- 调整水平位移、垂直位移、模糊半径和扩散半径。
- 选择阴影颜色、背景颜色,并设置透明度与圆角。
- 按需切换为 inset 内阴影效果。
- 复制生成的 CSS 代码到组件样式或设计交付文档中。
工具特性
- 支持常见 box-shadow 参数可视化调节
- 支持外阴影与 inset 内阴影
- 本地实时预览并复制 CSS 输出
为什么使用这个工具?
- 快速调试卡片、按钮、输入框与浮层的阴影层级
- 减少手写阴影语法与不断刷新页面试错的时间
- 方便设计和前端直接共享可落地的 CSS 参数