CSS 新拟态生成器
调整表面与光线方向,预览结果并复制安全的纯文本 CSS 声明。
LIVE PREVIEW
Neumorphism
使用步骤
如何使用
- 选择背景色并调整圆角、距离、模糊和强度。
- 设置光线角度,在浏览器本地查看预览。
- 复制生成的 box-shadow 声明到样式表。
成对的柔和阴影
新拟态在同一表面上使用明亮阴影和深色阴影,本生成器根据基础色和光线角度生成两者。
安全的纯文本输出
结果只有 CSS 声明。输入是数字或颜色控件,预览使用 style 属性,不解析或执行输入 HTML。
视觉起点
效果取决于周围背景和对比度。请在界面中检查,并为重要状态补充边框、文字或其他提示。
常见问题
你可能还想知道
会生成 HTML 吗?
不会,只生成 box-shadow CSS 声明,并使用受控样式预览。
输入会上传吗?
不会,计算、预览和可复制 CSS 都在浏览器本地完成。
为什么有两层阴影?
明亮和深色阴影成对使用,可形成凸起或凹陷的新拟态效果。