NodlumeGlows · Radial
Spotlight gradient
Spotlight is a tight white circle fading quickly to transparent, meant to sit behind one element on a dark surface — a product image, a logo, a single number — and pull the eye to it. Where Hero glow is atmosphere, Spotlight is direction; it says look here, and it says it only once per page.
Center it on the element it lights, keep the fade short so the edge stays soft but the circle stays small, and never use two on one screen. On a light surface it disappears, so it is a dark-mode gradient, or a gradient for a dark section on a light page. Its alpha is the only knob worth touching: 20% is a suggestion, 40% is a stage.
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(255 255 255 / 30%)0%
- rgb(255 255 255 / 0%)45%
CSS
.spotlight {
background-image: radial-gradient(circle at 50% 50% in oklab, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 0%) 45%);
}Tailwind
bg-[image:radial-gradient(circle_at_50%_50%_in_oklab,_rgb(255_255_255_/_30%)_0%,_rgb(255_255_255_/_0%)_45%)]
Token
--gradient-spotlight: radial-gradient(circle at 50% 50% in oklab, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 0%) 45%);
Spotlight, answered
- What are the CSS colors in the Spotlight gradient?
- Spotlight uses one color: #ffffff. 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(circle at 50% 50% in oklab, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 0%) 45%) — 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 Spotlight 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 Spotlight 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.