NodlumeMesh & aurora · Mesh
Aurora gradient
Aurora is a mesh: three soft pools of color — cyan, violet, green — over a near-black base, each fading to transparent, so the surface reads as light moving across a night sky rather than as paint. CSS has no mesh-gradient function; this is a stack of radial gradients in one background-image, which is what every aurora effect on the web actually is.
It is a hero gradient and nothing else: at card size the pools collapse into a stain. Put white headlines on the base, not on the pools, and give it room. Animate it only by drifting the pool positions slowly, never by cycling hue, and honor prefers-reduced-motion. For a daytime version of the same structure, see Soft paper.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- rgb(34 211 238 / 70%)at 15%, 20%
- rgb(168 85 247 / 65%)at 80%, 30%
- rgb(52 211 153 / 55%)at 50%, 85%
- #0b1020base
CSS
.aurora {
background-color: #0b1020;
background-image: radial-gradient(circle at 15% 20% in oklab, rgb(34 211 238 / 70%) 0%, transparent 55%),
radial-gradient(circle at 80% 30% in oklab, rgb(168 85 247 / 65%) 0%, transparent 55%),
radial-gradient(circle at 50% 85% in oklab, rgb(52 211 153 / 55%) 0%, transparent 55%);
}Tailwind
bg-[#0b1020] bg-[image:radial-gradient(circle_at_15%_20%_in_oklab,_rgb(34_211_238_/_70%)_0%,_transparent_55%),_radial-gradient(circle_at_80%_30%_in_oklab,_rgb(168_85_247_/_65%)_0%,_transparent_55%),_radial-gradient(circle_at_50%_85%_in_oklab,_rgb(52_211_153_/_55%)_0%,_transparent_55%)]
Token
--gradient-aurora: radial-gradient(circle at 15% 20% in oklab, rgb(34 211 238 / 70%) 0%, transparent 55%), radial-gradient(circle at 80% 30% in oklab, rgb(168 85 247 / 65%) 0%, transparent 55%), radial-gradient(circle at 50% 85% in oklab, rgb(52 211 153 / 55%) 0%, transparent 55%);
Aurora, answered
- What are the CSS colors in the Aurora gradient?
- Aurora uses 3 colors: #22d3ee, #a855f7, #34d399. It is a mesh — several radial gradients stacked in one background-image over a solid base — so each stop is a pool you can move rather than a point on a line. The full value is radial-gradient(circle at 15% 20% in oklab, rgb(34 211 238 / 70%) 0%, transparent 55%), radial-gradient(circle at 80% 30% in oklab, rgb(168 85 247 / 65%) 0%, transparent 55%), radial-gradient(circle at 50% 85% in oklab, rgb(52 211 153 / 55%) 0%, transparent 55%) — copy the CSS rule, the Tailwind class or the custom property above, or open it in the playground to change any stop.
- How do I use the Aurora gradient in Tailwind CSS?
- Copy the Tailwind tab: it is an arbitrary-value class of the form bg-[image:…], with the spaces in the gradient written as underscores, which Tailwind v3 and v4 both accept for a one-off value. A mesh also needs its base color, so the output is two classes.
- Why is the Aurora gradient interpolated in oklab?
- Two colors interpolated in sRGB pass through a grayer, darker middle than either end; in oklab the midpoint is perceptually between them, so the ramp stays clean. Every gradient function accepts an in <space> keyword, and oklab is the right default for a color-to-color ramp.