代码、数据与二维码工具

CSS 新拟态生成器

调整表面与光线方向,预览结果并复制安全的纯文本 CSS 声明。

优先本地处理无需注册隐私说明 ↗

All values stay in this browser. The preview uses controlled style properties and never parses input HTML.

LIVE PREVIEW

Neumorphism

使用步骤

如何使用

  1. 选择背景色并调整圆角、距离、模糊和强度。
  2. 设置光线角度,在浏览器本地查看预览。
  3. 复制生成的 box-shadow 声明到样式表。

成对的柔和阴影

新拟态在同一表面上使用明亮阴影和深色阴影,本生成器根据基础色和光线角度生成两者。

安全的纯文本输出

结果只有 CSS 声明。输入是数字或颜色控件,预览使用 style 属性,不解析或执行输入 HTML。

视觉起点

效果取决于周围背景和对比度。请在界面中检查,并为重要状态补充边框、文字或其他提示。

常见问题

你可能还想知道

会生成 HTML 吗?

不会,只生成 box-shadow CSS 声明,并使用受控样式预览。

输入会上传吗?

不会,计算、预览和可复制 CSS 都在浏览器本地完成。

为什么有两层阴影?

明亮和深色阴影成对使用,可形成凸起或凹陷的新拟态效果。