NodlumeCool · Linear
Indigo gradient
Indigo to violet is the default product gradient of the last decade — the ramp behind a thousand SaaS heroes — and it endures because it sits exactly between the trust of blue and the energy of purple. Both stops are saturated and close in lightness, so the ramp is vivid without a light or dark edge, and white text holds on every part of it.
It is the right starting point for a brand that has an indigo primary and wants a gradient that stays on-brand: keep the first stop as the primary and pull the second toward it if the violet drifts too far from the identity. Its weakness is ubiquity. If yours is the fifth indigo hero a visitor sees today, the Sunset or Ember ramps are where to look for distance.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #4f46e50%
- #a855f7100%
CSS
.indigo {
background-image: linear-gradient(135deg in oklab, #4f46e5 0%, #a855f7 100%);
}Tailwind
bg-[image:linear-gradient(135deg_in_oklab,_#4f46e5_0%,_#a855f7_100%)]
Token
--gradient-indigo: linear-gradient(135deg in oklab, #4f46e5 0%, #a855f7 100%);
Indigo, answered
- What are the CSS colors in the Indigo gradient?
- Indigo uses 2 colors: #4f46e5, #a855f7. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(135deg in oklab, #4f46e5 0%, #a855f7 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 Indigo 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 Indigo 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.