关于 CSS 内阴影生成器
该工具用于生成 inset box-shadow 样式,支持偏移、模糊、扩散、颜色与透明度可视化调节。
核心功能
- 参数可视化:X/Y 偏移、模糊半径、扩散半径实时调节。
- 颜色与透明度:支持色板/文本输入并控制不透明度。
- 即时预览:在示例卡片上实时查看内阴影效果。
- 代码导出:生成可直接使用的 CSS 代码。
- 一键重置:快速恢复默认参数重新试验。
使用说明
- 调整阴影各项参数。
- 观察预览区效果变化。
- 微调颜色与透明度以匹配主题。
- 复制生成 CSS 代码。
使用场景
- 输入框、卡片、按钮的内凹质感设计。
- 深浅主题下的细节层次塑造。
- 拟物化或玻璃风 UI 层次增强。
常见问题
为什么看不到明显内阴影?
可能是颜色对比太弱或模糊过大,建议提高对比并适当减小 blur。
内阴影会影响性能吗?
大量复杂阴影会增加渲染成本,建议在高频列表中控制使用强度。