CSS 阴影生成器

可视化调节 box-shadow 参数,实时预览并输出 CSS 代码

使用说明

CSS 阴影生成器可视化调节 box-shadow 的偏移、模糊、扩展、颜色和内阴影,支持叠加多层阴影,实时预览并生成 CSS 代码,省去反复试参数的麻烦。

常用于制作卡片、按钮的立体投影效果。全部在浏览器本地生成,无需上传。

常见问题

Q box-shadow 各参数什么意思?

依次是水平偏移、垂直偏移、模糊半径、扩展半径、颜色;inset 表示内阴影。本工具用滑块可视化调节这些值。

Q 怎么做多层阴影?

点「加层」可叠加多个阴影,用逗号分隔,常用于做更柔和或更有层次的投影效果。

Q 内阴影 inset 是什么?

勾选 inset 后阴影出现在元素内部,常用于做凹陷、输入框聚焦等效果。

相关工具

© 2026 ITBX 工具箱 · 开发者在线工具集

本地运算 · 数据不上传(除明确标注的在线检查类工具)