Aurora Gradient
极光渐变
Aliases:极光渐变极光风格渐变光斑背景流动光晕设计那种绿紫渐变的模糊背景大面积渐变光效Aurora BackgroundMesh Gradient
What is it
An atmosphere built from large flowing gradient blooms: teal, violet and blue blurred blobs drift and merge across the background while the foreground stays minimal. Color is the protagonist — soft, cross-hue, aurora-like transitions that give the interface breath and warmth.
Design spec
Typography
Sans-serif white display
Color
Night base #0D0B1E with green-violet-pink glow
Border
1px translucent violet borders
Shadow
Deep shadows with glow
Spacing
Floating stacked cards, roomy gaps
Motion
300–500ms ease-in-out drift of the glow, with fades; honour prefers-reduced-motion
States
Hover brightens the glow; focus shows a visible violet-pink ring; active dims the bloom; disabled loses opacity and glow; error tints the glow red, fading colour only
Style in action
See the full page, then try the interactive sceneFull-page preview
Flow with
the Light
Let color flow like the northern lights.
Night sky · Light blooms · Gradient type
Light it up →Green, violet and pink glows
Light, translucent cards
Slow color transitions
Interactive scene
Loading demo…
✓ When to use
- Landing pages, heroes and brand pages that need instant atmosphere
- AI and creative tools where gradients are a category signature
- Minimal foregrounds that need warmth in either mode
✕ When not to use
- Data-dense tools where blooms interfere with scanning
- Accessibility-critical contexts — text over blooms is hard to keep compliant
- Performance-sensitive devices when animated blobs are used
Variants
Static Mesh
静态网格渐变
A one-shot multi-point mesh gradient, no motion
Flowing Blobs
流动光斑
Heavily blurred blobs drifting slowly — aurora in motion
Dark Aurora
暗夜极光
Denser light bands over deep space, higher contrast
Implementation
background: radial-gradientfilter: blur()@keyframes driftmix-blend-modebackground-clip: textThree ingredients: two to four large radial-gradient blooms (40–80% of the canvas), heavy blur around 60px, and hues spanning two or three segments (teal→violet→blue) that partially overlap. Keep foreground minimal — solid text or translucent panels hold contrast. Animated blobs drift slowly (20s+) on transform only, multiply durations by var(--demo-speed, 1), and freeze under prefers-reduced-motion.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement an aurora-gradient hero section in the current project. Inspect the existing design tokens first; expose bloom colors as theme-configurable variables. Requirements: - Two to four blurred radial-gradient blooms spanning two or three hues with partial overlap - Minimal foreground: solid text or translucent panels keep contrast - Blob motion is slow transform-only drift, durations multiplied by var(--demo-speed, 1), frozen under prefers-reduced-motion - Aurora palettes for both light and dark modes - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.
StylesSimilarA layout language that packs the interface like a bento box: rounded tiles of varying spans snap to one grid with narrow gutters — big cells carry the hero content, small cells hold stats and garnish. A card-grid upgrade where area itself encodes priority.
StylesSimilarA visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesSimilarA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffectsA marketing page organized vertically around one conversion goal: nav and hero explain "what is this and why it's good", mid-sections use features and social proof (logos, testimonials, numbers) to dissolve objections, and a strong call-to-action closes. Sections follow the persuasion order — each screen answers the visitor's next question.
PagesUsed with