盒子阴影生成器
盒子阴影生成器是一个免费的视觉化 CSS 工具，帮助你在无需手动编写代码的情况下为网页元素创建漂亮的盒阴影。无论是需要卡片组件的柔和投影、CTA 按钮的强烈发光效果，还是多层叠加的戏剧性 3D 效果，这个生成器都能让你完全控制每个阴影参数。通过直观的滑块和颜色选择器调整水平/垂直偏移、模糊半径、扩展半径、颜色和不透明度。切换内阴影和外阴影模式。添加多个阴影层，在实时预览元素上查看效果。工具输出整洁的跨浏览器 CSS 代码，可直接复制粘贴到样式表中。
功能介绍
CSS box-shadow 属性用于在元素框周围添加阴影效果。盒子阴影可以用相对于元素的 X 和 Y 偏移、模糊和扩展半径、颜色以及元素内外阴影来描述。 box-shadow 语法： box-shadow: offset-x offset-y blur-radius spread-radius color inset; 理解每个参数： - offset-x：阴影与元素的水平距离。正值向右移动，负值向左移动。 - offset-y：垂直距离。正值向下移动，负值向上移动。 - blur-radius：阴影边缘的模糊程度。0 表示锐利边缘，值越大阴影越柔和。不能为负值。 - spread-radius：扩展或收缩阴影大小。正值使阴影比元素大，负值使阴影更小。 - color：任何 CSS 颜色值（十六进制、rgb、rgba、hsl、命名颜色）。使用带 alpha 透明度的 rgba 可创建逼真的阴影。 - inset（可选）：存在时，阴影绘制在元素内部而非外部。 为什么要使用盒子阴影： - 深度和层次感：阴影通过让元素看起来浮于表面来创建视觉层级 - Material Design 规范：谷歌的 Material Design 系统用阴影深度表示组件层级 - 焦点和悬停状态：阴影为交互元素提供视觉反馈 - 美学优化：即使是微妙的阴影也能让界面看起来更精致专业 - 卡片区分：阴影帮助在卡片式布局中将卡片与背景分离 生成器支持多层阴影（逗号分隔），允许在单个元素上堆叠多个阴影效果以获得更逼真或更戏剧化的结果。
使用方法
- 使用复选框启用或禁用各阴影层。从一层阴影开始，需要时点击 'Add Shadow' 按钮添加更多层。每层都可以独立配置。
- 使用滑块调整水平偏移（offset-x）。正值将阴影移至元素右侧，负值移至左侧。拖动时观察预览实时更新。
- 设置垂直偏移（offset-y）以控制阴影出现在元素上方或下方的距离。正值使阴影向下移动，模拟从上方照来的光源。
- 增加模糊半径以获得更柔和、更扩散的阴影。0 的值产生锐利的阴影边缘；5-20px 的值在大多数 UI 元素上创建自然的阴影效果。非常大的值（30px+）产生类似发光的效果。
- 微调扩展半径以扩展或收缩阴影。负值可以使阴影紧贴元素，适合创建锐利的边缘效果。正值使阴影比元素本身更大。
- 使用颜色选择器选择阴影颜色。启用不透明度滑块调整透明度——真实的阴影通常使用 rgba(0, 0, 0, 0.1-0.3)。尝试不同的颜色以实现创意发光效果（如按钮的蓝色霓虹发光）。
- 切换 'Inset' 复选框在内阴影和外阴影之间切换。内阴影绘制在元素内部，创建凹陷或按下效果，适用于表单输入框和凹陷按钮。
- 一键从输出面板复制生成的 CSS 代码。代码包含所有浏览器前缀以确保跨浏览器兼容性。直接粘贴到样式表或内联 style 属性中。
计算示例
输入: X:0 Y:4px 模糊:12px 扩展:0 颜色:rgba(0,0,0,0.15)
过程: 组合偏移+模糊+颜色 → CSS box-shadow语法
结果: box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
输入: X:2px Y:2px 模糊:8px 扩展:-2px 颜色:#3b82f6
过程: 多层阴影叠加 → 偏移计算
结果: box-shadow: 2px 2px 8px -2px #3b82f6;
相关搜索
相关搜索：盒子阴影生成器, css 盒子阴影, 阴影生成器, css 阴影。
盒子阴影生成器css 盒子阴影阴影生成器css 阴影
常见问题
box-shadow 和 text-shadow 有什么区别？
box-shadow 应用于块级元素（div、section、卡片、按钮），在元素的矩形框周围创建阴影。text-shadow 应用于元素内的文本内容，在字母形状后面创建阴影。它们使用类似的语法（offset-x、offset-y、blur、color），但 box-shadow 有额外的功能，如 spread-radius 和 inset 关键字。
可以在一个元素上创建多个阴影吗？
可以！多个 box-shadow 通过逗号分隔阴影值来定义。工具支持无限的阴影层。多个阴影允许创建更逼真的效果——例如，将紧凑的深色阴影（用于直接深度）与柔和的大阴影（用于环境投影）组合。顺序很重要：列表中的第一个阴影显示在最上方，后续阴影层叠在其后。
逼真的阴影应该使用什么颜色？
要获得最逼真的结果，使用暗色版本的背景色配合低不透明度。浅色背景上，15-25% 不透明度的纯黑色（rgba(0,0,0,0.15-0.25)）效果很好。在彩色背景上，使用背景色的暗色阴影。避免使用完全不透明的阴影——它们看起来不自然。对于彩色发光效果，使用 30-60% 不透明度的亮色。
所有浏览器都支持 box-shadow 吗？
是的，box-shadow 有很好的浏览器支持。所有现代浏览器（Chrome、Firefox、Safari、Edge、Opera）都支持，无需浏览器前缀。对于非常旧的浏览器（IE 及以下），box-shadow 不受支持，但这些浏览器现在市场份额可以忽略不计。生成的 CSS 包含 -webkit- 前缀以获得最大兼容性。
如何创建 Material Design 风格的阴影？
Material Design 对不同层级使用特定的阴影值。常见值：层级 1：0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)。层级 2：0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)。层级 3：0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)。每层组合两个阴影（一个紧凑的、一个扩散的）会产生 Material Design 特有的深度效果。