CSS 阴影生成器

可视化调整参数,实时预览并生成 box-shadow / text-shadow CSS 代码

背景:
形状:
背景:
Hello

关于 CSS 阴影生成器
  • 支持 box-shadow(元素阴影)和 text-shadow(文字阴影)两种模式
  • 通过滑块实时调整参数,预览区即时更新,所见即所得
  • 支持多层叠加阴影效果(最多 5 层),生成完整 CSS 代码含 -webkit- 前缀
操作说明
  • 调整滑块参数,预览区实时更新阴影效果
  • 点击「添加层」可叠加多个阴影,点击层右侧 删除该层
  • 点击「生成 CSS」输出完整代码,一键复制即可使用
注意事项
  • 最多支持 5 层叠加阴影,超出后「添加层」按钮将禁用
  • 颜色透明度通过 rgba() 实现,兼容所有现代浏览器
  • 所有处理均在浏览器本地完成,不上传任何数据
AI助手
AI助手加载中...