使用实时可视化编辑器创建精美的 CSS 阴影。调整偏移、模糊、扩散和颜色 — 一键复制即用 CSS。100% 免费，纯客户端处理。
Adjust the controls to see the shadow effect in real-time
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);CSS 阴影生成器是一个可视化工具，用于为 HTML 元素创建精美的投影效果。与静态阴影库不同，此工具允许你实时微调每个参数 — 水平偏移、垂直偏移、模糊半径、扩散半径和颜色。它生成标准 CSS box-shadow 语法，兼容所有现代浏览器。无论你是需要微妙的 Material Design 阴影还是戏剧性的发光效果，此工具都能满足你的需求。所有处理都在浏览器中进行 — 数据不会发送到任何地方。
CSS 阴影是一种视觉效果，为 HTML 元素的边框添加阴影。它由 box-shadow 属性定义，包含水平偏移、垂直偏移、模糊半径、扩散半径和颜色。阴影可用于在网页设计中创建深度、层次和视觉层级。
扩散半径（也称为扩展）控制阴影的大小。正值扩展阴影，使其比元素本身更大。负值收缩阴影。它是创建硬朗、清晰阴影与柔和、漫射阴影的关键参数。
内阴影出现在元素边框内部，营造出深度或内倒角的错觉。它通常用于按钮按下效果、卡片浮雕和内发光。切换"内阴影"选项可在外阴影和内阴影之间切换。
是的。生成的 box-shadow 语法遵循 CSS 标准，在所有现代浏览器中都有效，包括 Chrome、Firefox、Safari、Edge 和移动浏览器。当前浏览器版本不需要厂商前缀。
An inset shadow appears inside the element rather than outside. It creates a recessed or pressed effect, commonly used for buttons that look pushed in or for creating inner depth on containers.
To create a glow effect, set both Horizontal and Vertical Offset to 0, use a larger Blur Radius (15-30px), choose a bright color, and increase the opacity. You can also add a positive Spread Radius to intensify the glow.
While CSS box-shadow is well-supported, subtle rendering differences can occur between browsers due to how each engine handles anti-aliasing and color blending. The differences are usually minor and the shadow will look great across all modern browsers.
Absolutely! The CSS code generated by this tool is standard CSS that you can use in any project — personal, commercial, or open source. There are no restrictions on how you use the generated code.