✨ Box-shadow Generator

Design CSS box-shadows with a live preview in your browser — tweak offset, blur, spread and color.

📐 工作原理与说明

CSS 语法：box-shadow: [inset] Xpx Ypx 模糊px 扩散px rgba(颜色, 透明度%)；inset 为内阴影，省略为外阴影，透明度 0–100% 映射到 alpha 通道

生成 CSS 盒阴影代码并实时预览，支持内外阴影与多层叠加。

X 偏移

Y 偏移

模糊

扩散

颜色

透明度

内阴影 (inset)

CSS 代码

—

📚 深度解析：Box-shadow 生成器

💡 常见使用场景

可视化调出元素投影：偏移/模糊/扩散/颜色。

做拟态（Neumorphism）按钮：叠加一深一浅两层阴影，深色偏右下、浅色偏左上，配合与背景同色的填充，可得到凸起的立体感。

生成

`box-shadow: 2px 4px 8px rgba(0,0,0,0.2)`（右 2 下 4、模糊 8、20% 黑）。

❓ 常见问题（FAQ）

inset 是什么？

加 inset 变为内阴影，用于凹陷效果。

阴影会影响性能吗？

box-shadow 的模糊半径越大，重绘成本越高，在滚动或动画中大量使用会掉帧。建议：给做动画的元素加 will-change 或改用 transform 动画；用较小的模糊半径叠加多层代替单层大模糊，通常更快也更好看。

Item

Formula / Note

Source / Standard

Syntax

offset-x, offset-y, blur, spread and color with optional inset

CSS Backgrounds and Borders Level 3

Blur radius

a larger radius softens the edge; zero yields a hard edge

CSS Backgrounds and Borders Level 3

Multiple shadows

comma-separated layers paint with the first on top

CSS Backgrounds and Borders Level 3

Box-shadow 生成器