效果预览
中心示例块会实时反映当前参数,适合先看质感,再决定代码是否可用。
-
-
CSS 输出
生成的代码偏向通用 class 样式,你可以直接复制到按钮、卡片或输入框上继续微调。
- 当前效果
- -
- 光源方向
- -
- 示例尺寸
- -
- 主色
- -
基础参数
先选主色,再用尺寸、圆角、距离与模糊把手感调到位。
风格与方向
原页的角点方向和几种拟态样式,在这里合并成更直接的下拉选项。
适合什么场景
- 做登录卡片、按钮、统计模块或轻量控制面板时,拟态风格更容易营造柔和质感。
- 浅底色最容易做出干净的高光和阴影层次,深色底建议适当降低强度和模糊。
- 如果只是想要轻微浮雕感,可以先选“外凸”,再把距离和强度降下来。
怎么调更自然
- 距离越大,空间感越强;模糊越大,边缘越柔和,两者一起拉高容易显得发灰。
- 内陷更适合输入框、搜索框和凹槽式卡片;外凸更适合按钮和可点击块。
- 复制 CSS 后,可以只保留 `background` 和 `box-shadow`,按你的组件尺寸重写 `border-radius`。

语言代码对照表
图片滤镜处理
中国传统色卡
HTML 转义处理工具
HTML 转 JS 工具
SQL 压缩 / 格式化
JS 压缩 / 格式化
HTML 压缩 / 格式化
XML 压缩 / 格式化
JSON转YAML工具
JSON格式化工具
XML转JSON工具
网友评论