Box Shadow 生成器可让您用滑块实时调整阴影效果,支持多图层阴影叠加,并提供 Material、Neumorphism、Neon 等 8 种精选预设,调整好后可直接复制 CSS 代码。
功能说明
- 5 个可调参数:X 偏移(左右)、Y 偏移(上下)、模糊半径(边缘柔化程度)、扩展半径(整体大小)、不透明度,各有独立滑块。
- 多图层阴影:点击“添加阴影图层”可叠加多个阴影,实际设计中常用 2–3 层阴影叠加来产生更自然的立体感(如 Material Design 规范)。
- Inset 内阴影:勾选 Inset 可将阴影翻转到元素内部,常用于制作按压感按钮或凹陷卡片效果。
- 3 种预览背景:可在浅色、深色、渐变背景间切换,以便在不同底色下确认阴影效果是否理想。
- 8 种精选预设:Flat(无阴影)、Subtle(柔和阴影)、Card(卡片)、Material(Material Design 三层)、Dramatic(大景深)、Neon Blue(霓虹)、Neumorphism(新拟态)、Inset(内阴影)。
- 一键复制 CSS:输出完整的 box-shadow: ...; 语法,可直接粘贴到 CSS、Tailwind 的 style 属性或任何设计工具中。
如何使用?
- 用滑块调整偏移、模糊、扩展与不透明度,预览区会实时更新。
- 需要更自然的立体感时,添加多个阴影图层,或勾选 Inset 制作内阴影。
- 点击复制,将 CSS 粘贴到项目中。