CSS 新态风格生成器
生成软UI(新态风格)CSS — 背景色加上一对偏移的box-shadow，一个更浅一个更深，采用raised(flat/convex)或pressed(concave)风格 — 从基础色、距离、模糊和圆角生成。
输入
元素及其周围的基础色。
浅色和深色阴影从元素延伸的距离。
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-neumorphism-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#e0e5ec",
"style": "flat",
"distance": "20",
"blur": "60",
"borderRadius": "50"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-neumorphism-generator` tool (CSS Neumorphism Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-neumorphism-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 新态风格生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
功能说明
CSS 新态风格生成器将颜色选择器和三个滑块转变为可立即粘贴的"软UI"CSS代码块。新态风格(结合了"新"和"拟物")是一种设计趋势，界面元素看起来像是由与背景相同的材料塑造而成的 — 从表面挤出或压入其中 — 仅使用背景色和一对偏移阴影实现。效果背后没有任何渐变技巧或图像资源：整个幻觉完全来自于放置一个比背景更浅的阴影(模拟光源)与一个比背景更深的阴影(模拟其投射的阴影)的对比。
生成的属性
background: <color or gradient>;
border-radius: Npx;
box-shadow: Dpx Dpx Bpx <darker>, -Dpx -Dpx Bpx <lighter>;- background — Flat风格时使用原始基础色，或在Convex(raised)和Concave(pressed)风格中使用略浅到略深之间的柔和对角渐变 — 渐变方向在两种风格间相反，这使得一个看起来凸出，另一个看起来凹陷。
- border-radius — 从圆角滑块设置的圆角。新态风格元素几乎总是圆角的；尖角会破坏"模塑材料"的幻觉。
- box-shadow — 两个由距离滑块在相反方向偏移的阴影：右下方向的较深色调(如同从左上方照亮)和左上方向的较浅色调。两个都共享相同的模糊半径，使其在边缘处淡入背景而不是显示硬阴影线。
较浅和较深的色调来自于将每个RGB通道推向白色或黑色固定量的基础色 — 这是自2019/2020年最初的"Neumorphism in User Interfaces"推广以来效果一直使用的相同浅化/深化数学。
如何使用
- 选择背景色 — 它是输出中所有阴影和渐变的基础，因此效果在中间色、低饱和度颜色上效果最佳(经典新态风格调色板是像
#e0e5ec这样的柔和灰色；非常深或非常饱和的颜色会降低阴影所需的对比度)。 - 选择风格：Flat用于仅具有raised阴影对的纯色面板，Convex添加看起来向外膨起的渐变，或Concave反转该渐变使面板看起来向内压入。
- 拖动距离设置浅色/深色阴影从元素延伸的距离，拖动模糊控制其边缘的柔和程度 — 较大的模糊值加上匹配的距离会产生最光滑的"模塑"外观。
- 设置圆角控制面板角的圆度。
- 复制生成的CSS并将其应用于任何具有与您选择的颜色匹配(或接近)背景的块级元素 — 新态风格只有在元素周围与其基础色匹配时才能正确呈现，因为阴影是针对它进行校准的。
常见问题
为什么我的元素看起来平坦而不是"软UI"? 父级/页面背景必须与此处选择的颜色匹配(或非常接近)。新态风格依赖于元素融入其周围环境，除了两个微妙的阴影 — 将其放在白色页面上，使用灰色基础色，幻觉就会破裂。
为什么新态风格被视为可访问性风险? 整个效果依赖于元素与其背景之间的非常低的对比度，这正是无障碍指南(如WCAG对比率)警告的内容。将其用于装饰表面和低风险UI，而不是用于文本、按钮或用户必须一目了然区分的任何内容。
我能用inset阴影获得真正的"压入"效果吗?
该生成器的Concave风格通过反转背景渐变而不是切换到CSS inset阴影来模拟压入效果。如果需要字面的inset阴影，请在生成的CSS中的每个box-shadow值添加inset关键字。
此工具是否会存储或上传我的颜色选择? 不会。一切都在您的浏览器中本地运行 — 您输入的任何内容都不会被发送到服务器或保存。