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
The same page, ready to useLight it up opens light-field mixing. Choose a spectrum and intensity, preview live and save the recipe, then edit/save again. Light, Color, Space and v2.0 reveal matching content.
Full-page preview · interact directly
What to look for
- 01Use Borealis’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the Borealis task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ 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.
Build a complete Borealis page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. Keep Borealis’ green/violet/pink radial light field over #0D0B1E, with the existing CSS mountain silhouette, translucent cards and pale-violet actions; do not impose a new 60px blur or 24s automatic drift. The light-field tool changes --light-hue and --light-intensity live, initially Emerald / 65%; saved recipes do not redraw the original hero. Reuse current preview.tokens: background radial-gradient(60% 80% at 20% 10%, rgba(52,211,153,.35), transparent), radial-gradient(55% 70% at 80% 25%, rgba(129,140,248,.4), transparent), radial-gradient(60% 60% at 50% 95%, rgba(236,72,153,.3), transparent), #0D0B1E; foreground #F4F3FF; accent #A5B4FC / #1E1B4B; card rgba(255,255,255,.08); border rgba(165,180,252,.3); radius 14px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow none. Use generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows. Full-page operations: Light it up opens light-field mixing. Choose a spectrum and intensity, preview live and save the recipe, then edit/save again. Light, Color, Space and v2.0 reveal matching content. Share one renderer between static covers, the detail experience and /style-scenes/aurora/ (English /en/style-scenes/aurora/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. 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.
StylesSimilar
A 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.
StylesSimilar
A 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