Glasssystem

Gradient Aurora

71
🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI with aurora borealis-inspired gradients — iridescent teal-to-purple-to-green washes, translucent panels, ethereal glows, and the mesmerizing quality of northern lights over a dark sky.

gradientstranslucentiridescentethereal

Added February 10, 2026 by unslop.dev

Example output

Aurora hero card

✦ Now Available

Experience the
Northern Lights

Immersive visual experiences that bring the aurora borealis into your digital space. Crafted with light, color, and movement.

View code
<div style="padding: 3rem; background: #0a0a0f; background-image: radial-gradient(ellipse at 30% 50%, rgba(45,212,191,0.12), transparent 60%), radial-gradient(ellipse at 70% 30%, rgba(168,85,247,0.12), transparent 60%), radial-gradient(ellipse at 50% 80%, rgba(52,211,153,0.08), transparent 50%);">
  <div style="background: rgba(10,10,15,0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(148,163,184,0.06); border-radius: 1rem; padding: 2.5rem; max-width: 26rem; box-shadow: 0 0 40px rgba(45,212,191,0.06);">
    <div style="font-family: 'Inter', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #2dd4bf; margin-bottom: 1rem;">✦ Now Available</div>
    <h2 style="font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 200; color: #f0fdf4; margin: 0 0 0.75rem 0; line-height: 1.2; letter-spacing: -0.02em;">Experience the<br><span style="background: linear-gradient(135deg, #2dd4bf, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 300;">Northern Lights</span></h2>
    <p style="font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: #94a3b8; line-height: 1.7; margin: 0 0 2rem 0;">Immersive visual experiences that bring the aurora borealis into your digital space. Crafted with light, color, and movement.</p>
    <div style="display: flex; gap: 0.75rem;">
      <button style="background: rgba(45,212,191,0.12); border: 1px solid rgba(45,212,191,0.25); color: #2dd4bf; border-radius: 0.75rem; padding: 0.625rem 1.5rem; font-size: 0.875rem; font-family: 'Inter', sans-serif; cursor: pointer; box-shadow: 0 0 16px rgba(45,212,191,0.08);">Explore</button>
      <button style="background: rgba(148,163,184,0.06); border: 1px solid rgba(148,163,184,0.1); color: #94a3b8; border-radius: 0.75rem; padding: 0.625rem 1.5rem; font-size: 0.875rem; font-family: 'Inter', sans-serif; cursor: pointer;">Learn More</button>
    </div>
  </div>
</div>

Feature badges

Real-time sync Edge computing Auto-scaling Multi-region Encrypted
View code
<div style="padding: 2rem; background: #0a0a0f; background-image: radial-gradient(ellipse at 50% 50%, rgba(168,85,247,0.1), transparent 70%);">
  <div style="display: flex; gap: 0.625rem; flex-wrap: wrap; max-width: 28rem;">
    <span style="font-family: 'Inter', sans-serif; background: rgba(45,212,191,0.1); border: 1px solid rgba(45,212,191,0.2); color: #2dd4bf; font-size: 0.75rem; padding: 0.375rem 0.875rem; border-radius: 9999px;">Real-time sync</span>
    <span style="font-family: 'Inter', sans-serif; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); color: #a855f7; font-size: 0.75rem; padding: 0.375rem 0.875rem; border-radius: 9999px;">Edge computing</span>
    <span style="font-family: 'Inter', sans-serif; background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.2); color: #34d399; font-size: 0.75rem; padding: 0.375rem 0.875rem; border-radius: 9999px;">Auto-scaling</span>
    <span style="font-family: 'Inter', sans-serif; background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.2); color: #38bdf8; font-size: 0.75rem; padding: 0.375rem 0.875rem; border-radius: 9999px;">Multi-region</span>
    <span style="font-family: 'Inter', sans-serif; background: rgba(244,114,182,0.1); border: 1px solid rgba(244,114,182,0.2); color: #f472b6; font-size: 0.75rem; padding: 0.375rem 0.875rem; border-radius: 9999px;">Encrypted</span>
  </div>
</div>

Metric card with glow

Active Users
14,328
↑ 24.5% vs last week
View code
<div style="padding: 2rem; background: #0a0a0f; background-image: radial-gradient(ellipse at 40% 60%, rgba(45,212,191,0.08), transparent 50%);">
  <div style="background: rgba(10,10,15,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(45,212,191,0.1); border-radius: 1rem; padding: 1.5rem; max-width: 16rem; box-shadow: 0 0 30px rgba(45,212,191,0.05);">
    <div style="font-family: 'Inter', sans-serif; font-size: 0.6875rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem;">Active Users</div>
    <div style="font-family: 'Inter', sans-serif; font-size: 2.5rem; font-weight: 200; letter-spacing: -0.03em; margin-bottom: 0.375rem;">
      <span style="background: linear-gradient(135deg, #2dd4bf, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">14,328</span>
    </div>
    <div style="display: flex; align-items: center; gap: 0.375rem;">
      <span style="font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #2dd4bf;">↑ 24.5%</span>
      <span style="font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #64748b;">vs last week</span>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in an aurora borealis style — iridescent, ethereal, and mesmerizing. Backgrounds wash with teal-to-violet-to-emerald gradients like northern lights. Panels float with translucent surfaces. Colors shift and blend. The overall feeling is cosmic, dreamy, and luminous.

VISUAL RULES:
- Background: Dark base with aurora gradient overlay. Base: #0a0a0f. Gradient: `background: linear-gradient(135deg, #0a0a0f, #0d1f2d, #0a1628, #12082a, #0a0f1a)` with additional radial gradients for color pools: `radial-gradient(ellipse at 20% 50%, rgba(45,212,191,0.15), transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(168,85,247,0.15), transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(52,211,153,0.12), transparent 50%)`.
- Aurora colors: Teal (#2dd4bf), violet (#a855f7), emerald (#34d399), sky blue (#38bdf8), and hints of pink (#f472b6). These are the northern lights — they blend, they don't sit in boxes.
- Panel surface: `background: rgba(10,10,15,0.5); backdrop-filter: blur(12px)`. Border: `1px solid rgba(148,163,184,0.08)`. Ultra-subtle. The aurora shows through.
- Text: White (#f0fdf4 — greenish white for teal themes, #faf5ff — purplish white for violet themes). Gray (#94a3b8) for body. Dim (#64748b) for metadata.
- Glow effects: Colored glows matching the nearest aurora hue. `box-shadow: 0 0 30px rgba(45,212,191,0.15)` for teal elements. Glows on hover and active states.
- Typography: Light sans-serif. `font-family: 'Inter', -apple-system, sans-serif`. Thin weights (200-300) for headings, regular (400) for body. The type should feel weightless.
- Border radius: Generous. 16px on cards, 12px on inputs, 999px on pills. Organic, flowing shapes.
- Borders: Nearly invisible. 1px with aurora color at very low opacity. The glow is more important than the border.

SPECIFIC PATTERNS:
- Cards: Translucent dark, aurora gradient showing through, rounded-2xl. Subtle colored glow on left or top edge. The card should feel like a window into the aurora.
- Buttons: Ghost-style with aurora accent. `background: rgba(45,212,191,0.1); border: 1px solid rgba(45,212,191,0.2)`. Teal text. Hover: glow intensifies.
- Gradient text: For headings, use `background: linear-gradient(135deg, #2dd4bf, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent`. The text catches the aurora colors.
- Tags/pills: Small, rounded-full, with aurora gradient borders or fills at low opacity. Colorful but soft.
- Progress indicators: Gradient fills from teal to violet. Glowing tip. Feels like a streak of aurora.

ANTI-PATTERNS:
- No opaque solid-color backgrounds on panels. Everything shows the gradient.
- No warm earthy colors. No brown, terracotta, gold, cream.
- No sharp corners. Minimum 12px radius.
- No heavy, dark shadows. Use glows instead. Shadows should carry aurora color.
- No bold/heavy font weights for large text. Keep it light and ethereal.

Related prompts

🌱 Solar Output
Live

4.2 kWh

Today's generation — 12% above forecast

0 kWh 6 kWh peak
Glass

Solarpunk Green

🔥80system

Generates UI radiating sustainable optimism — translucent green panels, soft light diffusion, organic data visualization, and the hopeful energy of tech that works with nature, not against it.

â—†

Crystal Cache

Edge network layer

Distributed caching at the edge. Sub-millisecond reads with automatic invalidation and regional replication.

Requests
2.4M
↑ 12.3%
Latency
4.2ms
↓ 8.1%
Uptime
99.97%
30d window
Glass

Frosted Midnight

🔥63system

Generates UI with dark glass morphism — midnight blue and charcoal surfaces, frosted translucent panels, cool blue highlights, and the elegant depth of a winter night sky behind ice.

♦

Cloud Storage

2.4 GB of 10 GB used

Your files are synced across all devices. Upgrade your plan for more storage and priority support.

Confirm Changes

×

You're about to update your workspace settings. This will affect all team members currently in this project. Are you sure you want to continue?

What will change

Default branch protection, merge requirements, and notification preferences for 12 members.

Glass

Glass Morphism

🔥62system

Generates UI with frosted-glass surfaces, backdrop blur, translucent layers, and soft gradients — depth created through transparency, not shadows. Light, airy, and dimensional.