盒子阴影生成器

设计具有偏移、模糊、扩散和颜色的分层盒阴影。在卡片上预览，然后一键复制 CSS。

Box Shadow Generator

Live

Offset X8px

Offset Y16px

Blur32px

Spread-4px

Opacity35%

Card radius24px

Shadow color

Inset

Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

设计具有偏移、模糊、扩散和颜色的分层盒阴影 - 包括实时预览。
在您的浏览器中运行
免费使用

使用方法

调整偏移、模糊和扩散。
选择颜色和不透明度（或添加图层）。
复制盒子阴影 CSS。

How this tool works

调整偏移、模糊和扩散。
选择颜色和不透明度（或添加图层）。
复制盒子阴影 CSS。

Recommended settings

首先使用默认选项，然后根据需要进行调整

Supported formats

Text / on-page input

File size and limits

在旧手机上，非常复杂的多层预览可能会感觉较慢。

Privacy

颜色和 CSS 生成器完全在您的浏览器中运行。预览和转换永远不会上传您的样式。

Common use cases

随时使用盒阴影生成器：设计具有偏移、模糊、扩散和颜色的分层盒阴影 - 包括实时预览。

Troubleshooting

粘贴后预览看起来有所不同

检查页面上是否存在竞争 CSS（重置、继承颜色）。首先将生成的规则复制到独立的样式表中。

常见问题

这会上传我的 CSS 吗？

不需要。生成器和转换器在您的浏览器中运行并提供实时预览。

我需要一个帐户吗？

不。打开工具，调整控件，然后复制 CSS。