NodlumeCool · Linear
Sky gradient
Sky is a pale blue fading into near-white, the gradient equivalent of looking up on a clear day. It is as light as a gradient can be and still register as one, and that is its job: it gives a white page a horizon without giving it a color. Most visitors will not consciously notice it, which is the point of a wash.
Use it behind a hero on a light page, or as the top of a long document so the header sits in air and the content sits on paper. Dark text holds everywhere. Because it ends in white, it dissolves cleanly into a white page with no hard edge — set the light stop at 70% rather than 100% to bring the seam up above the first paragraph.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #bfdbfe0%
- #ffffff100%
CSS
.sky {
background-image: linear-gradient(180deg in oklab, #bfdbfe 0%, #ffffff 100%);
}Tailwind
bg-[image:linear-gradient(180deg_in_oklab,_#bfdbfe_0%,_#ffffff_100%)]
Token
--gradient-sky: linear-gradient(180deg in oklab, #bfdbfe 0%, #ffffff 100%);
Sky, answered
- What are the CSS colors in the Sky gradient?
- Sky uses 2 colors: #bfdbfe, #ffffff. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(180deg in oklab, #bfdbfe 0%, #ffffff 100%) — 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 Sky 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 Sky 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.