背景色
#e0e0e0
输出
box-shadow: 9px 9px ...
设计配色
CSS 新拟态 - soft UI 阴影生成工具
按背景色、距离与模糊生成新拟态内外阴影 CSS，可预览凸起与凹陷效果，适合按钮、卡片和浅色界面控件的视觉调试与样式实验。
CSS新拟态阴影
设计配色
CSS 新拟态生成
按背景色、距离与模糊生成新拟态内外阴影 CSS，可预览凸起与凹陷效果，适合按钮、卡片和浅色界面控件的视觉调试与样式实验。
生成 CSS 代码
调整颜色、距离、模糊、圆角或形态后，预览和复制 CSS 会保持一致。
使用场景
- 调试柔和按钮阴影
- 生成浅色卡片层次
- 对比凸起与凹陷控件效果
如何使用
- 选择背景色
- 调整距离和模糊
- 预览后复制 CSS
示例输入输出
FAQ
适合深色背景吗？
更适合浅色背景；深色界面通常需要单独调整高光与暗部颜色。
和 box-shadow 生成有何不同？
本工具按新拟态常见的双边阴影组合输出；通用阴影工具更适合任意偏移、扩散与多层阴影。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。