CSS阴影生成器

预览效果

水平偏移 (X)

垂直偏移 (Y)

模糊半径 (Blur)

扩散半径 (Spread)

阴影颜色

不透明度

生成的CSS代码

box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.3);

免费CSS工具 | 实时预览盒阴影效果

使用滑块调整水平偏移、垂直偏移、模糊半径和扩散半径。实时预览框中的元素会显示效果。

选择阴影颜色并调整不透明度。建议使用半透明黑色以获得自然的阴影效果。

点击"复制CSS"按钮将生成的box-shadow代码复制到剪贴板，粘贴到您的CSS文件中使用。

CSS盒阴影是网页设计中常用的视觉效果。通过本工具，您可以轻松创建各种阴影效果，无需记忆复杂的CSS语法。

创建柔和阴影时，使用较大的模糊半径和较低的不透明度。创建强烈阴影时，使用较小的模糊半径和较高的不透明度。多层阴影可以创建更复杂的效果。