极光渐变Aurora UI
大尺度流动渐变色带缓慢呼吸，像极光一样在深底上晕开；常用 screen 混合与 8–12s 循环。氛围强，务必给文字留纯色衬底。
典型场景AI 产品 · 品牌落地页 · 发布会
编号10
年代2020s Modern
复杂度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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
大尺度流动渐变色带缓慢呼吸，像极光一样在深底上晕开；常用 screen 混合与 8–12s 循环。氛围强，务必给文字留纯色衬底。
关键词
Vibrant gradientssmooth blendNorthern Lights effectmesh gradientluminousatmosphericabstract
效果与动效
Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph
设计系统变量
--gradient-colorscomplementary pairs--animation-duration8-12s--blend-modescreen--color-saturation1.2--effectiridescent--loop-smoothtrue配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF
辅色 / Secondary
Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)
强调色在页面底色上的对比度约 5.4:1，可用于正文与图标。
适用场景
适合 / Best For
- Modern SaaS
- creative agencies
- branding
- music platforms
- lifestyle
- premium products
- hero sections
避开 / Do Not Use For
- Data-heavy dashboards
- critical accessibility
- content-heavy where distraction issues
框架兼容
tailwindcss-in-js
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Mesh/flowing gradients applied,
- 8-12s animation loop,
- Complementary colors used,
- Smooth color transitions,
- Iridescent effect subtle,
- Text contrast verified
CSS / 技术关键词
background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiply
下辖变体：渐变网格 / 极光进化。
AI 提示词
Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange, purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects.