Loading...
Loading...
用实时预览设计新拟态(Soft UI)柔和阴影。
新拟态(Soft UI)用两道相配的阴影,让元素看起来像从背景里挤出来:一侧深、一侧浅。手动调这两道阴影的颜色很麻烦,所以这个工具从单一表面颜色推导它们,并让你实时调结果。
选好表面颜色,工具替你算出明、暗两道阴影的色调。调整尺寸、圆角、阴影距离、模糊系数和强度,在平面、内凹、外凸、按下四种形态间切换。内凹和外凸会加一层细微渐变,按下用内阴影让元素看起来陷进去。预览就放在同样的表面颜色上,和它在你界面里的样子一致,对应的 CSS 一键即取。它和玻璃拟态生成器互补,凑齐两大柔和表面风格。一切都在浏览器里运行。
从单一表面颜色算出明、暗两道色调。
平面、内凹、外凸、按下(内阴影)四种变体。
尺寸、圆角、距离、模糊系数和强度滑块。
元素放在自己的表面颜色上,与应用里一致。
圆角、背景和双 box-shadow 一键复制。
不上传;效果是本地渲染的真实 CSS。
新拟态在中间调表面上最好看;纯黑或纯白会让明阴影或暗阴影几乎显不出来。
选表面颜色,与你的背景匹配。
设置尺寸、圆角、距离和强度。
选形态:平面、内凹、外凸或按下。
把生成的 CSS 复制进你的组件。
给按钮、开关、卡片做出凸起、有触感的样子。
做出新拟态标志性的、安静的单色面板。
用「按下」形态表现激活或选中的控件。
看清楚明暗双阴影如何造出立体感。
表面颜色按强度值变亮和变暗,得到两道阴影色调,再按距离偏移并加模糊,同一组值同时驱动预览和可复制的 CSS。
无账号、无网络请求;颜色在本地计算和渲染。
每次改动只重算两个颜色和两道阴影,所以预览始终即时。