CSS 阴影生成器
可视化调节 box-shadow 参数,实时预览并输出 CSS 代码
使用说明
CSS 阴影生成器可视化调节 box-shadow 的偏移、模糊、扩展、颜色和内阴影,支持叠加多层阴影,实时预览并生成 CSS 代码,省去反复试参数的麻烦。
常用于制作卡片、按钮的立体投影效果。全部在浏览器本地生成,无需上传。
常见问题
Q box-shadow 各参数什么意思?⌄
依次是水平偏移、垂直偏移、模糊半径、扩展半径、颜色;inset 表示内阴影。本工具用滑块可视化调节这些值。
Q 怎么做多层阴影?⌄
点「加层」可叠加多个阴影,用逗号分隔,常用于做更柔和或更有层次的投影效果。
Q 内阴影 inset 是什么?⌄
勾选 inset 后阴影出现在元素内部,常用于做凹陷、输入框聚焦等效果。