🧰Locly

生成 CSS 阴影

可视化生成并预览 CSS box-shadow

预览

工具简介

CSS 阴影生成器可可视化调节偏移、模糊、扩展、颜色与 inset,并复制现成的 box-shadow 声明。清空后在重新设置有效阴影前禁用复制。全程在浏览器本地处理。

使用方法

  1. 调节偏移、模糊与扩展滑块
  2. 选择颜色与可选 inset
  3. 在示例方块上预览阴影
  4. 有输出时再复制 CSS
  5. 清空后变为无阴影(禁用复制)

常见使用场景

  • UI:设计卡片与按钮投影
  • 设计系统:快速试阴影 token
  • 教学:演示 blur 与 spread 差异
  • 原型:把 CSS 贴进样式表
  • 移动端:无需桌面 IDE 即可微调

常见问题(FAQ)

Q1: 清空后为何不能复制?

清空会去掉有效阴影,避免复制空的或误导性 CSS。

Q2: 会上传吗?

不会。生成在浏览器本地完成。

Q3: 支持 inset 吗?

支持——勾选内阴影即可。

Q4: 能用 rgba 吗?

可以——粘贴任意合法 CSS 颜色,包括 rgba()。

相关工具