首页CSS内阴影生成器

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 样式,支持偏移、模糊、扩散、颜色与透明度可视化调节。

核心功能

  • 参数可视化:X/Y 偏移、模糊半径、扩散半径实时调节。
  • 颜色与透明度:支持色板/文本输入并控制不透明度。
  • 即时预览:在示例卡片上实时查看内阴影效果。
  • 代码导出:生成可直接使用的 CSS 代码。
  • 一键重置:快速恢复默认参数重新试验。

使用说明

  1. 调整阴影各项参数。
  2. 观察预览区效果变化。
  3. 微调颜色与透明度以匹配主题。
  4. 复制生成 CSS 代码。

使用场景

  • 输入框、卡片、按钮的内凹质感设计。
  • 深浅主题下的细节层次塑造。
  • 拟物化或玻璃风 UI 层次增强。

常见问题

为什么看不到明显内阴影?

可能是颜色对比太弱或模糊过大,建议提高对比并适当减小 blur。

内阴影会影响性能吗?

大量复杂阴影会增加渲染成本,建议在高频列表中控制使用强度。