Digital / Web UI
Aurora Gradient
A soft atmospheric gradient inspired by aurora light, useful for depth without heavy illustration.
Au
Usage
- Hero backgrounds
- Section bands
- Empty states
Adjustable parameters
- color stops
- grain
- contrast
- field scale
- dark base
AI Prompt
Create an aurora gradient background with soft flowing color fields, quiet grain, deep negative space, and readable foreground contrast.
Tailwind notes
Use multiple radial gradients on a dark base, then add a subtle grain pseudo-element.
Performance notes
Large static gradients are usually safe. Avoid animated blur fields on low-end devices.
CSS
.aurora-gradient {
background:
radial-gradient(circle at 20% 20%, rgba(46, 255, 190, .42), transparent 32%),
radial-gradient(circle at 74% 34%, rgba(255, 94, 210, .28), transparent 34%),
radial-gradient(circle at 52% 78%, rgba(255, 211, 92, .22), transparent 32%),
#080b0a;
}React example
export function AuroraSection({ children }) {
return <section className="aurora-gradient">{children}</section>;
}