阴影 CSS 在你的浏览器本地生成,不会上传。

CSS 阴影生成器

构建一个或多个 CSS 盒子阴影,调整偏移、模糊、扩展、内阴影、颜色和透明度,然后复制生成的 CSS。

阴影 CSS 在你的浏览器本地生成,不会上传。

叠加生成盒子阴影

阴影 1

阴影预览

用于卡片、按钮与界面层次的 CSS 阴影

无论是卡片、面板、按钮、弹窗、产品样机还是界面实验,想要精致的阴影又不想手写每个数值时,都可以用这个 CSS 阴影生成器。

所有控件都在你的浏览器本地运行。叠加多层阴影、调整顺序、设置预览背景,满意后复制一段有效的 box-shadow 声明。

如何使用这个工具

  1. 调整第一层阴影

    设置 X 偏移、Y 偏移、模糊、扩展、颜色、透明度和内阴影选项。

  2. 叠加更多阴影

    添加更多阴影并调整顺序,营造层叠的立体感。

  3. 复制 CSS

    预览效果,把生成的 box-shadow 声明复制到你的样式表中。

常见问题

这个阴影生成器会上传内容吗?

不会。CSS 在你的浏览器本地生成。

可以创建多层阴影吗?

可以。在复制最终 CSS 前添加叠加阴影并调整顺序。

支持内阴影吗?

支持。每层阴影都有独立的内阴影开关。

它输出什么 CSS?

输出是一段 box-shadow 声明,可直接粘贴到 CSS 中。