NodlumeGlows · Radial
Corner wash gradient
Corner wash is an elliptical glow of warm color anchored in the top-left corner and fading out by the middle of the surface — the cheapest way to give a page a temperature. Because it touches only one corner, it leaves most of the surface as it was, so content, cards and text keep their contrast while the page as a whole stops feeling blank.
It works in either mode and at any scale, from a whole viewport down to a card. Place it opposite the page's main action so the eye travels across the color toward the button, not into it. If the wash reaches text, lower its alpha before you shrink it; a faint wash that spans the page reads better than a strong one cut short.
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(249 115 22 / 35%)0%
- rgb(249 115 22 / 0%)60%
CSS
.corner-wash {
background-image: radial-gradient(ellipse at 0% 0% in oklab, rgb(249 115 22 / 35%) 0%, rgb(249 115 22 / 0%) 60%);
}Tailwind
bg-[image:radial-gradient(ellipse_at_0%_0%_in_oklab,_rgb(249_115_22_/_35%)_0%,_rgb(249_115_22_/_0%)_60%)]
Token
--gradient-corner-wash: radial-gradient(ellipse at 0% 0% in oklab, rgb(249 115 22 / 35%) 0%, rgb(249 115 22 / 0%) 60%);
Corner wash, answered
- What are the CSS colors in the Corner wash gradient?
- Corner wash uses one color: #f97316. 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 0% 0% in oklab, rgb(249 115 22 / 35%) 0%, rgb(249 115 22 / 0%) 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 Corner wash 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 Corner wash 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.