NodlumeCool · Linear
Arctic gradient
Arctic runs from an icy cyan to a white with a hint of violet in it, and the violet is what stops it being Sky: the ramp crosses a faint lavender on the way, which reads as cold light rather than blue paint. It is the palette of ice, glass and winter, and of any product that wants to feel precise.
It is a strong choice for data-heavy interfaces — analytics, developer tools, medical — where warmth would feel out of place, and it carries dark text everywhere. It is a poor choice for anything meant to feel friendly. In dark mode, flip the ends and drop both alphas to around 30% and it becomes a cold glow at the top of a dark page.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #a5f3fc0%
- #ede9fe100%
CSS
.arctic {
background-image: linear-gradient(120deg in oklab, #a5f3fc 0%, #ede9fe 100%);
}Tailwind
bg-[image:linear-gradient(120deg_in_oklab,_#a5f3fc_0%,_#ede9fe_100%)]
Token
--gradient-arctic: linear-gradient(120deg in oklab, #a5f3fc 0%, #ede9fe 100%);
Arctic, answered
- What are the CSS colors in the Arctic gradient?
- Arctic uses 2 colors: #a5f3fc, #ede9fe. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(120deg in oklab, #a5f3fc 0%, #ede9fe 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 Arctic 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 Arctic 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.