阴影生成器

可视化调整CSS box-shadow,支持X/Y偏移、模糊、扩散、颜色、内阴影,预设Material/Neumorphism风格,一键复制CSS。

关于 阴影生成器

阴影生成器帮助你可视化调整CSS box-shadow。通过调整X/Y偏移、模糊半径、扩散范围、颜色和透明度,生成各种风格的阴影效果。

box-shadow语法

  • 基本语法:box-shadow: x-offset y-offset blur spread color;
  • 内阴影:box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  • 多层阴影:box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1);

常见阴影风格

  • Material Design:0 2px 4px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.1)
  • 柔和阴影:0 10px 40px rgba(0,0,0,0.1)
  • 新拟态:6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff