My Pocket Tools

CSS 阴影生成器

生成精美的 CSS box-shadow 效果，支持实时预览和可自定义的属性

实时预览
阴影
阴影 1
0px
4px
6px
0px
预设阴影
生成的 CSS
box-shadow: 0px 4px 6px 0px #00000040;
.box { box-shadow: 0px 4px 6px 0px #00000040; }

什么是 CSS Box Shadow？

CSS box-shadow 是一种为元素边框周围添加阴影效果的属性。您可以设置多个效果，并用逗号分隔。我们的阴影生成器通过可视化编辑器让您轻松创建和自定义阴影。调整偏移、模糊、扩展和颜色，并创建内阴影，同时支持实时预览。

阴影属性

  • 水平偏移 (X): 将阴影向左（负值）或向右（正值）移动
  • 垂直偏移 (Y): 将阴影向上（负值）或向下（正值）移动
  • 模糊半径: 值越大模糊越强。0 表示锐利的边缘
  • 扩展半径: 正值扩大阴影，负值缩小阴影
  • 阴影颜色: 阴影颜色，可选不透明度（使用带 alpha 的 hex 或 rgba）
  • 内阴影: 将阴影从外部更改为内部（位于元素内侧）

使用方法

  1. 调整水平和垂直偏移以定位阴影
  2. 设置模糊半径以控制阴影柔和度，设置扩展半径以控制大小
  3. 选择阴影颜色，并根据需要切换内阴影
  4. 添加多层阴影以实现叠加效果，然后复制 CSS 代码

核心功能

  • 实时预览：调整数值时实时查看您的阴影
  • 多层阴影：叠加最多 5 层阴影以实现复杂效果
  • 预设阴影：使用 6 种常用阴影样式快速上手
  • 内阴影：创建内阴影以打造立体感效果
  • 复制 CSS 代码：一键复制完整的 box-shadow 属性

相关工具