极光渐变
Aurora Gradient
别名:极光渐变极光风格渐变光斑背景流动光晕设计那种绿紫渐变的模糊背景大面积渐变光效Aurora BackgroundMesh Gradient
这是什么
用大面积流动渐变光斑营造氛围的视觉语言：青绿 紫 蓝 多色模糊色块在背景 中缓慢漂移融合，前景内容保持极简克制。色彩是主角——像极光一样柔和 跨 色相 渐次过渡，界面因此获得呼吸感与情绪温度。
开发规格
字体
无衬线白标题
色彩
暗夜底 #0D0B1E × 绿紫粉光斑
边框
1px 半透明紫边框
阴影
深色大投影 + 光晕
间距
悬浮卡层叠，间距宽松
动效
300–500ms ease-in-out 的光斑漂移与淡入，尊重 prefers-reduced-motion
状态反馈
hover 增强光斑亮度；focus 用紫粉色可见亮环；active 压低光晕；disabled 降透明去光；error 用红调光斑且仅淡入颜色
风格演示
先看整页效果，再试交互场景整页预览
Flow with
the Light
让颜色像极光一样流动。
暗夜底 · 光斑 · 渐变文字
点亮 →绿紫粉光晕
轻透的内容卡
缓慢变色动画
交互场景
正在加载演示…
✓ 适用场景
- 落地页 首屏 品牌页，需要第一眼氛围与情绪
- AI 创意工具类产品，渐变已成为其品类视觉符号
- 极简前景 + 需要一点温度的深浅色界面
✕ 不适用场景
- 数据密集工具界面，大面积渐变干扰信息读取
- 可访问性敏感场景，光斑上的文字对比度难保证
- 大量使用动画光斑时低端设备性能敏感
常见形式
静态网格渐变
Static Mesh
一次成型的多点网格渐变，无动画
流动光斑
Flowing Blobs
大 blur 色块缓慢漂移，动效极光
暗夜极光
Dark Aurora
深空底色上更浓的光带，对比更强
实现要点
background: radial-gradientfilter: blur()@keyframes driftmix-blend-modebackground-clip: text光斑三要素：2～4 个大型 radial-gradient 色块（直径为画布的 40%～80%）， blur(60px) 级别的重模糊，色相跨越 2～3 段（如青绿→紫→蓝）且彼此部分 重叠。前景内容置于光斑之上，用纯色文字或半透明白面板保证对比。动画 光斑只做位移与缩放的慢速漂移（20s+），时长乘 var(--demo-speed, 1)， 并在 prefers-reduced-motion 下静止。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中用极光渐变（Aurora Gradient）实现一个氛围感首屏区块。 先检查现有 Design Token 与主题变量，光斑颜色做成主题可配置变量。 要求： - 2～4 个 radial-gradient 模糊光斑，色相跨 2～3 段且部分重叠 - 前景极简：纯色文字或半透明面板保证对比度 - 光斑动画只做慢速 transform 漂移，时长乘 var(--demo-speed, 1)， 并支持 prefers-reduced-motion 静止 - 支持深浅两套极光配色 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
风格相似概念把界面装进便当盒的布局语言：一组圆角矩形像分格便当一样拼合，各格跨度不同 ——大格承载主内容，小格陈列数据与点缀，格与格之间留窄缝对齐同一套网格。 它是卡片网格的升级：用面积差异直接表达信息优先级。
风格相似概念以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格相似概念用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件围绕单一转化目标纵向组织信息的营销页面：顶部导航与 Hero 主视觉先讲清楚"这是什么、好在哪"， 中段用功能区、信任区（客户 logo、评价、数据）逐层打消顾虑，末端以强视觉的行动按钮收口。 页面按说服顺序分区，每一屏都在回答用户下一步的疑问。
页面搭配使用