NodlumeMesh & aurora · Mesh
Nebula gradient
Nebula is a dark mesh in the purple family: a magenta pool and an indigo pool on a near-black base, with a small warm ember low in the frame to keep the whole thing from going cold. Where Aurora reads as sky, Nebula reads as space — deeper, denser, and more saturated — and it is the mesh for a product that wants drama rather than calm.
It carries white text on the base and on the indigo pool, and struggles on the magenta; keep headlines left or low. Like every mesh it needs size, and it pairs with a single warm accent — amber, gold — rather than with more purple. Lower the spread to tighten the pools into distinct lights, or raise it to let them merge into a wash.
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(217 70 239 / 65%)at 20%, 25%
- rgb(79 70 229 / 70%)at 80%, 40%
- rgb(249 115 22 / 35%)at 60%, 90%
- #0a0a1abase
CSS
.nebula {
background-color: #0a0a1a;
background-image: radial-gradient(circle at 20% 25% in oklab, rgb(217 70 239 / 65%) 0%, transparent 60%),
radial-gradient(circle at 80% 40% in oklab, rgb(79 70 229 / 70%) 0%, transparent 60%),
radial-gradient(circle at 60% 90% in oklab, rgb(249 115 22 / 35%) 0%, transparent 60%);
}Tailwind
bg-[#0a0a1a] bg-[image:radial-gradient(circle_at_20%_25%_in_oklab,_rgb(217_70_239_/_65%)_0%,_transparent_60%),_radial-gradient(circle_at_80%_40%_in_oklab,_rgb(79_70_229_/_70%)_0%,_transparent_60%),_radial-gradient(circle_at_60%_90%_in_oklab,_rgb(249_115_22_/_35%)_0%,_transparent_60%)]
Token
--gradient-nebula: radial-gradient(circle at 20% 25% in oklab, rgb(217 70 239 / 65%) 0%, transparent 60%), radial-gradient(circle at 80% 40% in oklab, rgb(79 70 229 / 70%) 0%, transparent 60%), radial-gradient(circle at 60% 90% in oklab, rgb(249 115 22 / 35%) 0%, transparent 60%);
Nebula, answered
- What are the CSS colors in the Nebula gradient?
- Nebula uses 3 colors: #d946ef, #4f46e5, #f97316. 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 20% 25% in oklab, rgb(217 70 239 / 65%) 0%, transparent 60%), radial-gradient(circle at 80% 40% in oklab, rgb(79 70 229 / 70%) 0%, transparent 60%), radial-gradient(circle at 60% 90% in oklab, rgb(249 115 22 / 35%) 0%, transparent 60%) — 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 Nebula 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 Nebula 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.