CSS 盒阴影生成器 使用多层、内嵌选项和实时预览来生成 CSS 盒阴影。
CSS 盒阴影生成器
使用多层、内嵌选项和实时预览来生成 CSS 盒阴影。
调整阴影参数
使用滑块控制偏移、模糊度、扩散和颜色等属性，针对每个阴影层进行设置。
添加多重阴影
点击「添加阴影」按钮，可以叠加多个阴影，从而实现复杂的深度效果。
复制代码
预览盒子的结果，并复制生成的CSS代码。
What Is CSS 盒阴影生成器?
CSS Box Shadow Generator 是一个用于创建盒阴影效果的视觉工具，无需手动编写 CSS。盒阴影为 HTML 元素添加了深度和维度，使其看起来凸起或凹陷于页面表面。此工具允许您控制阴影的每个方面：水平和垂直偏移、模糊半径、扩散距离、颜色不透明度以及 inset 模式。您可以叠加多个阴影层以创建类似 Material Design 海拔、软浮动卡片或微妙内发光等逼真的深度效果。每个阴影层都有独立的控制，因此您可以将用于深度的大型柔和阴影与用于定义的小型锐利阴影结合起来。实时预览会立即显示更改后的自定义盒子，生成的 CSS 代码可直接用于生产环境。
Why Use CSS 盒阴影生成器?
-
视觉控制使得创建复杂的多层阴影变得容易
-
支持外部和内部阴影，具有独立的控制
-
实时预览可自定义的预览盒子
-
生成干净的CSS代码，正确格式化了多个阴影层
Common Use Cases
卡片浮起效果
使用分层阴影创建漂浮的卡片效果，适用于Material Design。
按钮深度效果
为按钮添加微妙的阴影，从而实现可点击和凸起的外观。
模态叠加层
设计用于模态窗口和弹出框的阴影效果，创建视觉上的分离感。
内部发光效果
使用内部阴影来实现按压或凹陷元素样式。
Technical Guide
CSS box-shadow 属性接受一个或多个以逗号分隔的阴影值。每个阴影值由以下部分组成：水平偏移 (x)、垂直偏移 (y)、模糊半径（可选）、扩散半径（可选）、颜色（可选）和 inset 关键字（可选）。正 x 值将阴影向右推，正 y 值将其向下推。模糊半径会产生高斯模糊效果 - 较大的值创建更柔和的阴影。扩散半径可以扩大或缩小阴影；负值会创建比元素小的阴影。多个阴影按照顺序渲染 - 列出的第一个阴影出现在顶部。为了提高性能，请在频繁动画元素上尽量少使用盒阴影，因为它们可能触发昂贵的重绘。对于非矩形形状，请考虑使用 filter: drop-shadow()。现代浏览器完全支持 box-shadow，无需供应商前缀。
Tips & Best Practices
-
1将大模糊阴影与小锐利阴影叠加，创建逼真的深度感
-
2使用低alpha值的rgba颜色，实现自然看起来的阴影效果
-
3结合内部和外部阴影来实现3D按钮效果
-
4保持阴影颜色与背景颜色的关联性，以确保视觉的一致性
Related Tools
Frequently Asked Questions
Q 我可以添加多个阴影吗？
Q 什么是内部阴影？
Q 如何创建柔软的阴影？
Q 盒子阴影会影响布局吗？
Q 我可以动画化盒子阴影吗？
About This Tool
CSS 盒阴影生成器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.