CSS Gradient
Aurora Gradient
Bring the magic of the northern lights to your screen. This aurora gradient blends ethereal green with deep purple and teal, capturing the dancing lights of the Arctic sky. Ideal for creative agencies, music platforms, and designs that need to feel magical and otherworldly.
background: linear-gradient(135deg, #0f2027 0%, #203a43 25%, #2c5364 50%, #0aff9d 75%, #8b5cf6 100%);Color Stops
Frequently Asked Questions
›What colors create an aurora gradient?
Start with dark blue-green tones (#0F2027, #203A43, #2C5364), then introduce vivid green (#0AFF9D) and purple (#8B5CF6). The contrast between dark base and vivid accents is key.
›How do I animate this aurora gradient?
Use background-size: 400% 400% and a CSS keyframe animation that shifts background-position. This creates a slow, mesmerizing movement similar to real aurora.
›Is this gradient too dark for text?
The darker sections need white or very light text. The vivid green section may need dark text. Consider using a semi-transparent overlay to normalize contrast across the gradient.