CSS 阴影生成器
免费在线 CSS box-shadow 生成器。可视化创建精美阴影，可调整偏移、模糊、扩展、颜色和内阴影。实时预览，即时复制代码。
什么是 CSS box-shadow？
CSS box-shadow 是一个 CSS 属性，用于在元素框架周围添加阴影效果。它允许你通过指定偏移、模糊半径、扩展半径和颜色值来创建投影、内阴影和多层阴影。
box-shadow 有哪些参数？
box-shadow 属性接受多个值：水平偏移（X）、垂直偏移（Y）、模糊半径、扩展半径、颜色以及可选的 inset 关键字。你还可以用逗号分隔指定多个阴影。
inset 关键字是什么？
inset 关键字将阴影从外部阴影（投影）变为内部阴影。当指定 inset 时，阴影会绘制在元素边框内部而不是外部，产生内嵌效果。
什么是模糊半径？
模糊半径决定阴影边缘的模糊程度。值为 0 时创建清晰、坚实的边缘。较大的值会创建更扩散、更柔和的阴影，从元素延伸得更远。
什么是扩展半径？
扩展半径扩大或缩小阴影尺寸。正值使阴影比元素更大，负值使阴影更小。这会影响应用模糊之前的阴影大小。
如何创建多重阴影？
你可以通过用逗号分隔每个阴影定义来创建多重阴影。每个阴影可以有不同的偏移、模糊、扩展和颜色值。阴影按声明顺序应用，第一个阴影在最上层。
可以使用 RGBA 颜色吗？
可以，你可以使用任何 CSS 颜色格式，包括 RGBA、HSLA、HEX 或命名颜色。RGBA 和 HSLA 特别适合创建与背景自然融合的半透明阴影。
如何复制生成的 CSS 代码？
只需点击生成器界面中的"复制代码"按钮。CSS 代码将被复制到剪贴板，可以直接粘贴到样式表或 HTML 文件中。
box-shadow 在所有浏览器中都支持吗？
是的，box-shadow 在所有现代浏览器中都受支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。自 2011 年以来它一直是 CSS3 的一部分，具有出色的浏览器兼容性。
box-shadow 会影响性能吗？
box-shadow 对现代浏览器的性能影响很小。但是，在许多元素上使用具有大模糊半径的多个复杂阴影可能会影响渲染性能，尤其是在移动设备上。
box-shadow 的常见用途有哪些？
常见用途包括创建卡片悬浮效果、为按钮添加深度、创建内嵌表单字段、实现 Material Design 阴影效果，以及在重叠元素之间添加视觉分隔。
可以动画化 box-shadow 吗？
可以，box-shadow 可以使用 CSS 过渡或动画进行动画化。但是，动画化 box-shadow 可能会消耗较多性能。为了获得更好的性能，考虑使用伪元素配合不透明度过渡。
如何使用CSS 阴影生成器
告别盲猜数值，用这款工具直观地设计 CSS box-shadow。生成器在浏览器中本地运行，你输入的任何内容都不会被上传。
- 调整 H-Offset 和 V-Offset，让阴影在水平和垂直方向上移动。
- 增大 Blur 让边缘更柔和，调整 Spread 放大或缩小阴影范围。
- 选择 Color 并调节 Opacity，让阴影更自然、更有层次。
- 勾选 Inset 可将阴影改为绘制在元素内部。
- 从预览中复制最终生成的 box-shadow 规则，粘贴到样式表里。
较小的 Blur 配上稍大的正值 V-Offset，可以在元素正下方形成贴近现实的接触阴影，特别适合卡片和按钮。
相关工具
- CSS圆角生成器 可视化CSS圆角生成器，独立调整每个角的圆角半径，实时预览并即时复制生成的CSS代码。
- CSS 渐变生成器 可视化创建精美 CSS 渐变。生成支持多色标、自定义角度和位置的线性、径向和锥形渐变。即时复制可投入生产的 CSS 代码。
- CSS Grid生成器 免费在线可视化CSS Grid生成器，实时预览。交互式创建响应式网格布局，一键导出生产级CSS代码。
- CSS Flexbox生成器 可视化CSS Flexbox生成器,实时预览。调整Flex属性,即时获取可用的CSS代码。
- 创意圆角生成器 免费在线创意圆角生成器。拖拽 8 个手柄或选择 blob 预设，快速创建有机 CSS 形状并复制 border-radius 代码。
- 颜色转换器 免费在线颜色转换器。即时转换 HEX、RGB、HSL、HSV 格式，带可视化拾色器。100% 隐私保护，浏览器本地运行。
- CSS 缓动函数生成器 免费在线 CSS 缓动生成器。在交互曲线上拖拽 cubic-bezier 控制点，内置 18 种预设，小球循环动画实时对比，一键复制 timing function。
- CSS 文字阴影生成器 免费在线 CSS text-shadow 生成器。多层阴影可调偏移、模糊、颜色与透明度，内置霓虹、3D、复古、光晕等预设，实时预览并一键复制代码。