NodlumeMesh & aurora · Mesh
Soft paper gradient
Soft paper is the light-mode mesh: three pastel pools — pink, blue, yellow — on an off-white base, each fading to transparent, so the surface looks like colored light falling on paper. It is the same structure as Aurora with the values inverted, and it fills the gap most mesh generators leave, which is a mesh you can put dark text on.
It suits landing pages that want to feel warm and current without committing to a color, and it carries dark text everywhere because no pool is saturated enough to cost contrast. Keep the pools in the corners and the middle clear if a headline sits there. It has no dark-mode equivalent; pair it with Aurora and switch on the theme.
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(251 207 232 / 80%)at 10%, 10%
- rgb(191 219 254 / 80%)at 90%, 20%
- rgb(253 230 138 / 70%)at 60%, 90%
- #faf5ffbase
CSS
.soft-paper {
background-color: #faf5ff;
background-image: radial-gradient(circle at 10% 10% in oklab, rgb(251 207 232 / 80%) 0%, transparent 70%),
radial-gradient(circle at 90% 20% in oklab, rgb(191 219 254 / 80%) 0%, transparent 70%),
radial-gradient(circle at 60% 90% in oklab, rgb(253 230 138 / 70%) 0%, transparent 70%);
}Tailwind
bg-[#faf5ff] bg-[image:radial-gradient(circle_at_10%_10%_in_oklab,_rgb(251_207_232_/_80%)_0%,_transparent_70%),_radial-gradient(circle_at_90%_20%_in_oklab,_rgb(191_219_254_/_80%)_0%,_transparent_70%),_radial-gradient(circle_at_60%_90%_in_oklab,_rgb(253_230_138_/_70%)_0%,_transparent_70%)]
Token
--gradient-soft-paper: radial-gradient(circle at 10% 10% in oklab, rgb(251 207 232 / 80%) 0%, transparent 70%), radial-gradient(circle at 90% 20% in oklab, rgb(191 219 254 / 80%) 0%, transparent 70%), radial-gradient(circle at 60% 90% in oklab, rgb(253 230 138 / 70%) 0%, transparent 70%);
Soft paper, answered
- What are the CSS colors in the Soft paper gradient?
- Soft paper uses 3 colors: #fbcfe8, #bfdbfe, #fde68a. It is a mesh — several radial gradients stacked in one background-image over a solid base — so each stop is a pool you can move rather than a point on a line. The full value is radial-gradient(circle at 10% 10% in oklab, rgb(251 207 232 / 80%) 0%, transparent 70%), radial-gradient(circle at 90% 20% in oklab, rgb(191 219 254 / 80%) 0%, transparent 70%), radial-gradient(circle at 60% 90% in oklab, rgb(253 230 138 / 70%) 0%, transparent 70%) — 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 Soft paper 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. A mesh also needs its base color, so the output is two classes.
- Why is the Soft paper 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.