CSS内阴影生成器
在线CSS内阴影生成器，支持 inset box-shadow 参数可视化调节、实时预览与代码复制，适用于按钮按压与卡片凹陷效果调试。
实时预览
Inset Shadow
CSS 代码
box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.5);内阴影参数
工具说明
CSS 内阴影生成器用于快速创建 inset box-shadow 效果，支持偏移、模糊、扩展、颜色与透明度可视化调节，适合前端开发与 UI 设计联调。
什么是 inset box-shadow
Inset Box Shadow（内阴影）是 CSS box-shadow 的一种用法，通过添加 inset 关键字让阴影绘制在元素内部，可用于凹陷、按压、内嵌等视觉效果。
如何使用本工具
- 调整 X/Y 偏移控制内阴影位置与方向。
- 设置模糊半径与扩展半径，决定边缘柔和程度和阴影范围。
- 选择颜色与透明度，匹配浅色/深色背景下的视觉层级。
- 确认预览后复制 CSS 代码并应用到组件样式中。
Inset Shadow 语法
box-shadow: inset h-offset v-offset blur-radius spread-radius color;- inset: 关键字，将阴影绘制为内部阴影。
- h-offset: 水平偏移量（X），可为负值。
- v-offset: 垂直偏移量（Y），可为负值。
- blur-radius: 模糊半径，值越大边缘越柔和。
- spread-radius: 扩展半径，正值扩大阴影范围，负值缩小。
- color: 阴影颜色，常用 rgba 以便控制透明度。
应用场景
- 按钮按压效果：模拟点击/按下时的凹陷反馈。
- 卡片凹陷效果：为容器提供更强的层次与质感。
- 输入框内嵌：打造聚焦或禁用状态的内边缘效果。
- 细节强化：配合背景渐变/描边提升组件真实感。
常见问题 (FAQ)
Inset 和普通 box-shadow 有什么区别？
普通 box-shadow 绘制在元素外部，让元素更突出；inset 绘制在元素内部，让元素更像凹陷或内嵌。
如何创建凹陷输入框效果？
使用 inset，并将模糊半径设置为中等、扩展半径略为负值，再配合较深的阴影色与较低透明度，通常就能得到经典的内凹效果。
可以使用多个 inset 阴影吗？
可以。box-shadow 支持多个值用逗号分隔；如果都是内阴影，每一层都需要包含 inset 关键字。
隐私说明
本工具不会上传你的参数与代码内容，所有计算与预览都在浏览器本地完成。