渐变网格 / 极光进化Gradient Mesh / Aurora Evolved
多点渐变相互渗透，形成无方向的光雾底部，色彩可在 10s 内缓慢迁移。适合作为背景层，前景必须加实色遮罩。
典型场景AI 产品 · Web3 · 品牌视觉
编号65
年代2025+ Gradient Evolution
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
多点渐变相互渗透，形成无方向的光雾底部，色彩可在 10s 内缓慢迁移。适合作为背景层，前景必须加实色遮罩。
关键词
Complex gradientsmesh gradientsmulti-color blendaurora effectflowing colorsiridescentholographicprismatic
效果与动效
CSS mesh-gradient (experimental), SVG gradients, canvas gradients, smooth color morphing, flowing animation
设计系统变量
--mesh-color-1#00FFFF--mesh-color-2#FF00FF--mesh-color-3#FFFF00--mesh-color-4#00FF66--flow-duration10s--shimmer-intensity0.3配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Multi-stop gradients: Cyan #00FFFF, Magenta #FF00FF, Yellow #FFFF00, Blue #0066FF, Green #00FF66
辅色 / Secondary
Complementary mesh points, smooth color transitions, iridescent overlays, chromatic shifts
强调色在页面底色上的对比度约 6.4:1，可用于正文与图标。
适用场景
适合 / Best For
- Hero sections
- backgrounds
- creative brands
- music platforms
- fashion
- lifestyle
- premium products
避开 / Do Not Use For
- Data interfaces
- text-heavy content
- accessibility-critical
- conservative brands
框架兼容
csssvgcanvas
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Mesh gradient visible,
- Colors flow smoothly,
- Aurora effect achieved,
- Performance acceptable,
- Text remains readable,
- Mobile renders ok
CSS / 技术关键词
background: conic-gradient or mesh (SVG), animation: gradient flow (background-position), filter: hue-rotate for shimmer, mix-blend-mode: screen, canvas for complex mesh, multiple gradient layers
衍生自 极光渐变 / Aurora UI。
AI 提示词
Design with gradient mesh aurora effect. Use: multi-color mesh gradients, flowing color transitions, aurora/northern lights feel, iridescent overlays, holographic shimmer, prismatic effects, smooth color morphing.