Elysia Tools
导航
Design
生成 CSS 盒阴影属性
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
CSS 盒阴影生成器是一款高效的在线工具，旨在帮助开发者和设计师快速生成精确的 box-shadow CSS 代码，通过可视化调节参数即可实时预览阴影效果。
背景
正在开发一个产品展示页面，需要为卡片添加轻微的悬浮感。
问题
手动编写阴影参数难以直观把控视觉效果。
如何使用
调整水平偏移为 0，垂直偏移为 8px，模糊半径设为 20px，不透明度设为 0.15。
horizontal: 0, vertical: 8, blur: 20, spread: 0, color: #000000, opacity: 0.15结果
生成了 box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);，卡片呈现出自然的立体感。
背景
需要为按钮设计一个按下时的内凹效果。
问题
内阴影的参数设置较为复杂，容易导致阴影过深或过浅。
如何使用
勾选“内阴影”，设置水平和垂直偏移为 2px，模糊半径为 4px，颜色设为深灰色。
horizontal: 2, vertical: 2, blur: 4, spread: 0, color: #333333, opacity: 0.3, inset: true结果
生成了 box-shadow: inset 2px 2px 4px 0 rgba(51, 51, 51, 0.3);，实现了预期的按钮按压凹陷效果。
生成的 box-shadow 属性是标准的 CSS3 规范，在所有现代主流浏览器中均有良好支持。
可以，勾选“内阴影”选项即可在代码中添加 inset 关键字。
使用“不透明度”滑块即可直接控制阴影颜色的 alpha 通道值。
当前版本专注于生成单层 CSS 盒阴影属性。
是的，生成的代码格式为 box-shadow: ...;，可直接粘贴到 CSS 文件中。