跳至正文

CSS阴影生成器

可视化创建CSS box-shadow和text-shadow并复制代码的免费在线工具。

Box Shadow

阴影类型

阴影层

层 1
10%

CSS 代码

box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

预设阴影

主要功能​

  • 2种类型: Box Shadow、Text Shadow
  • 实时预览: 立即查看更改
  • 多层叠加: 添加最多5个阴影层
  • 精细控制: X/Y偏移、模糊、扩散、颜色、透明度
  • Inset支持: 内部阴影效果
  • 预设: 6个阴影预设
  • 一键复制: 立即复制CSS代码

阴影类型​

1. Box Shadow​

box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);

为元素外部或内部添加阴影效果。

使用场景:

  • 卡片阴影
  • 按钮立体感
  • 模态框背景
  • 图片边框效果

2. Text Shadow​

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

为文字添加阴影效果。

使用场景:

  • 标题文字
  • Logo文字
  • 霓虹效果
  • 立体文字

浏览器兼容性​

Box Shadow​

  • ✅ Chrome 10+
  • ✅ Firefox 4+
  • ✅ Safari 5.1+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ 所有移动浏览器

Text Shadow​

  • ✅ Chrome 4+
  • ✅ Firefox 3.5+
  • ✅ Safari 4+
  • ✅ Edge 12+
  • ✅ IE 10+
  • ✅ 所有移动浏览器

相关工具​