CSS 阴影生成器 — 实时预览打造阴影
通过偏移、模糊、扩展、颜色和内阴影控件可视化制作 CSS box-shadow 效果并复制代码。
🔒 全部在你的浏览器中运行。输入和输出都不会发送到服务器或被保存,十分安全。
这个工具有用吗?点一下表达心情
关于此工具
通过设置水平和垂直偏移、模糊、扩展、颜色以及内阴影(inset)选项,可视化地制作 CSS box-shadow 效果,并实时预览结果。满意后,把生成的 box-shadow 代码直接复制到你的样式表中即可。一切都在你的浏览器中完成。
常见问题
box-shadow 的各个数值是什么意思?
它们依次是水平偏移、垂直偏移、模糊半径、扩展半径和颜色。加上 inset 会把阴影绘制在元素内部而非背后,适合营造凹陷或按下的效果。
怎样做出柔和、不显眼的阴影?
使用较小的偏移、较大的模糊半径和低不透明度的颜色。例如向下偏移几像素并加上充分的模糊,这样柔和的阴影看起来自然有层次;而锐利、深重的阴影则可能显得笨重。
会有任何内容发送到服务器吗?
不会。预览和生成的 CSS 完全在你的浏览器中创建,你制作的任何内容都不会被上传或存储。