# CSS 盒阴影生成器

生成 CSS 盒阴影属性

> 标准页面: https://elysiatools.com/zh/tools/box-shadow-generator

- **分类:** Design

- **关键词:** css, 盒阴影, 阴影, 生成器, 样式

## 概述

CSS 盒阴影生成器是一款高效的在线工具，旨在帮助开发者和设计师快速生成精确的 box-shadow CSS 代码，通过可视化调节参数即可实时预览阴影效果。

## 输入项

- **水平偏移 (px)** (range)
- **垂直偏移 (px)** (range)
- **模糊半径 (px)** (range)
- **扩展半径 (px)** (range)
- **阴影颜色** (color): #000000
- **不透明度** (range)
- **内阴影** (checkbox)

## 适用场景

- 为网页元素添加具有层次感的阴影效果时
- 需要快速获取符合设计规范的 CSS 代码片段时
- 在调试 UI 界面阴影深度与模糊度时

## 工作原理

- 通过滑动条调整水平、垂直偏移量、模糊半径及扩展半径。
- 选择阴影颜色并设置不透明度，或勾选内阴影选项。
- 实时查看生成的 CSS 代码并一键复制到你的项目中。

## 使用案例

- 为卡片式 UI 组件添加柔和的悬浮阴影
- 创建按钮的点击下沉效果（通过内阴影实现）
- 快速对比不同模糊半径下的视觉表现

## 常见问题

### 生成的代码兼容所有浏览器吗？

生成的 box-shadow 属性是标准的 CSS3 规范，在所有现代主流浏览器中均有良好支持。

### 可以生成内阴影吗？

可以，勾选“内阴影”选项即可在代码中添加 inset 关键字。

### 如何调整阴影的透明度？

使用“不透明度”滑块即可直接控制阴影颜色的 alpha 通道值。

### 这个工具支持生成多重阴影吗？

当前版本专注于生成单层 CSS 盒阴影属性。

### 生成的代码可以直接使用吗？

是的，生成的代码格式为 box-shadow: ...;，可直接粘贴到 CSS 文件中。

## 相关工具

- [CSS 动画生成器](https://elysiatools.com/zh/tools/animation-generator): 生成 CSS 动画关键帧和属性
- [CSS 背景滤镜生成器](https://elysiatools.com/zh/tools/backdrop-filter-generator): 生成 CSS 背景滤镜属性，实现毛玻璃效果
- [CSS 圆角生成器](https://elysiatools.com/zh/tools/border-radius-generator): 生成 CSS 圆角属性
- [CSS 裁剪路径生成器](https://elysiatools.com/zh/tools/clip-path-generator): 生成自定义形状的 CSS 裁剪路径属性
- [CSS 滤镜生成器](https://elysiatools.com/zh/tools/css-filter-generator): 生成 CSS 滤镜属性
- [CSS 变换生成器](https://elysiatools.com/zh/tools/transform-generator): 生成 CSS 变换属性
- [颜色梯度生成器](https://elysiatools.com/zh/tools/color-gradient-generator): 在多种颜色之间生成平滑的颜色渐变，支持自定义步数和格式
- [阴影色生成器](https://elysiatools.com/zh/tools/color-shade): 通过添加黑色生成颜色的深色变化，为设计提供深度和对比度

## 示例

- [CSS 查看器样本](https://elysiatools.com/zh/samples/css-viewer-samples): 用于浏览器内 CSS 查看器的样本文件
- [Bulma CSS 框架示例](https://elysiatools.com/zh/samples/bulma): Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式
- [CSS选择器示例](https://elysiatools.com/zh/samples/css-selectors): 用于提取和分析测试的CSS选择器示例集合
- [Milligram CSS 框架示例](https://elysiatools.com/zh/samples/milligram): Milligram CSS框架示例，包括排版、表单、网格和组件

## 相关内容

- [色彩系统与 CSS 效果设计工作流](https://elysiatools.com/zh/hubs/design-generate): 从色板提取、配色关系、可访问性校验到 token 生成，再把 CSS 效果落到真实组件状态中。