NodlumeGlows · Radial
Hero glow gradient
Hero glow is the radial gradient behind most product heroes: a soft ellipse of brand color, pinned to the top edge and wider than it is tall, fading to transparent before the fold. It is not a background — it is a light source — and that is why it is transparent at the end: the surface underneath stays the surface, and the glow sits on it like a lamp on a wall.
Pin it at the top center, as here, and it reads as a halo behind the headline; move it to a corner and it reads as a window. Keep the alpha under 50% or the glow becomes a spot. It works in both modes, and it is the one gradient in the catalog that is built from a single color — swap the indigo for your primary and the whole effect follows the brand.
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(79 70 229 / 45%)0%
- rgb(79 70 229 / 0%)70%
CSS
.hero-glow {
background-image: radial-gradient(ellipse at 50% 0% in oklab, rgb(79 70 229 / 45%) 0%, rgb(79 70 229 / 0%) 70%);
}Tailwind
bg-[image:radial-gradient(ellipse_at_50%_0%_in_oklab,_rgb(79_70_229_/_45%)_0%,_rgb(79_70_229_/_0%)_70%)]
Token
--gradient-hero-glow: radial-gradient(ellipse at 50% 0% in oklab, rgb(79 70 229 / 45%) 0%, rgb(79 70 229 / 0%) 70%);
Hero glow, answered
- What are the CSS colors in the Hero glow gradient?
- Hero glow uses one color: #4f46e5. It is a radial gradient, so the center sets where the light sits and the last stop's transparency is what lets the surface underneath show through. The full value is radial-gradient(ellipse at 50% 0% in oklab, rgb(79 70 229 / 45%) 0%, rgb(79 70 229 / 0%) 70%) — 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 Hero glow 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. For a value you reuse across the site, register the Token tab's custom property in your theme instead and reference it from a utility.
- Why is the Hero glow 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.