不喜欢广告？ 去 无广告 今天
CSS极简风格生成器
颜色开发人员
广告 移除？
广告 移除？
指导
CSS极简风格生成器
无需手动调整两个相反的盒阴影，即可创建柔和、外扩的“神经形态”UI元素。选择一个基础颜色，选择形状（平面、凹陷、凸起或压入），拖动距离、强度、模糊和光线角度的滑块，然后将生成的CSS代码直接复制到项目中。
如何使用
- 选择一个背景颜色。该颜色同时用于元素和周围画布——正是这一点让神经形态效果得以实现。
- 选择形状： 平坦的, 凹陷 （轻微下凹）， 凸起 （轻微凸出），或 内嵌 （压入）。
- 调整 距离 且 光线角度 以设定阴影方向。
- 调整 强度 且 模糊 直到表面感觉自然。
- 复制CSS代码，或切换 显示 HTML + CSS 以获取可粘贴的代码片段。
特征
- 实时预览 ——每次滑块变化都会立即更新渲染的元素。
- 五个内置预设 ——柔和光效、强烈光效、柔和暗色、强烈暗色和压入效果。
- 自动推导的阴影颜色 ——明暗阴影会根据基础颜色进行数学上的变亮或变暗，从而确保效果始终匹配。
- 凹陷和凸起渐变 ——该工具会在这些模式下为元素表面生成匹配的线性渐变。
- 内嵌（压入）模式 ——用于按钮在点击时看起来“被压入”的效果。
- 光线角度控制 ——可将虚拟光源从0°旋转到360°。
- 可复制的CSS代码 ——输出干净，包含盒阴影声明和表面背景。
常问问题
-
什么是神经形态设计？
神经形态（也称为柔和UI）是一种视觉风格，其中元素看起来像是从背景中凸出或沉入背景中。它通过两个具有相同模糊度的盒阴影实现——一个较亮的阴影位于光线照射的一侧，另一个较暗的阴影位于相反侧——这两个阴影都以与元素本身相同颜色的背景为底色渲染。
-
为什么元素必须与背景颜色相同？
神经形态依赖于形状与背景属于同一表面的错觉。如果元素使用不同的颜色，它将不再看起来像凸出，而是像一个平面瓷砖带有两个随机的阴影，从而破坏了该效果。
-
神经形态界面是否具有可访问性？
它们存在众所周知的可访问性权衡。由于所有元素共享背景颜色，与文本和其他UI的对比度通常很低，可能违反WCAG对比度要求，并使屏幕放大器用户感到困惑。建议将神经形态用于装饰性表面，而关键的交互元素应保持高对比度。
-
光线角度与阴影偏移之间有什么关系？
两个阴影偏移是通过基本三角函数从光线角度推导出来的：offsetX = cos(角度) × 距离，offsetY = sin(角度) × 距离。相反的阴影放置在相反的偏移位置，以确保光线和暗影分别位于相对的边缘，与真实光源投射的位置一致。
