NodlumeCSS gradient playground
Build a linear, radial, conic or mesh gradient by dragging its color stops, choose the space it interpolates in, and judge it where gradients actually fail — under a card, clipped to a headline, drawn as a border. Copy the result as a CSS rule, a Tailwind arbitrary-value class, or a custom property. No account is needed. For when each kind is the right choice, read the gradient reference guide.
Four kinds, one model
Linear, radial and conic are the three CSS gradient functions. Mesh is the layered-radial idiom behind aurora and paper backgrounds: each stop becomes a pool of light you drag around the canvas.
Judged on real surfaces
A ramp that looks fine as a block can disappear once it is clipped to text or a two-pixel ring. The Card, Text and Border previews show the gradient the way it will ship.
Perceptual by default
Gradients interpolate in oklab unless you say otherwise, so the middle of a ramp is a color rather than a gray. Switch to oklch for a hue wheel, or srgb to match an older design tool.
Named gradients, ready to copy
26 starting points, each on its own page with the colors, the CSS, the Tailwind class, and where it belongs. Every one opens in the playground above with its stops loaded.
Warm
- SunsetOrange through hot pink into indigo, the way a sky cools.
- SunrisePale gold rising into peach and a soft rose.
- PeachTwo stops of peach and coral, soft enough for a whole page.
- GoldA metallic amber ramp with a highlight band, for badges and text.
- EmberNear-black rising into a red-orange glow, for dark heroes.
Cool
- OceanDeep navy lifting into a clear cyan, water seen from above.
- Deep oceanNavy into a darker navy — a dark background with a pulse in it.
- SkyPale blue into white — the lightest gradient that still reads.
- ArcticIcy cyan into a violet-tinged white, cold and clean.
- IndigoA brand ramp from indigo to violet, the default product gradient.
Purple & pink
Green & teal
Neutral
Glows
CSS gradients, answered
- What is a mesh gradient in CSS?
- CSS has no mesh-gradient function. The effect is several soft radial gradients stacked in one background-image, each a pool of color that fades to transparent, over a solid base color. This playground's Mesh mode is exactly that: every pool is a draggable stop with its own place and alpha, and the copied CSS is the stack of radial-gradient layers plus the base, so it works in every browser that supports layered backgrounds.
- Why interpolate a gradient in oklab instead of sRGB?
- A gradient between two saturated colors interpolated in sRGB passes through a gray, muddy middle — blue to yellow goes through a dull gray-green. Interpolating in oklab keeps the ramp perceptually even, so the midpoint looks like a color between the two ends. Every gradient function accepts an `in <space>` keyword; this tool defaults to oklab and offers srgb and oklch, where oklch keeps chroma constant through a hue ramp and suits a conic hue wheel.
- How do I make gradient text or a gradient border?
- Gradient text is the gradient as a background-image with background-clip: text and a transparent color, so only the glyphs show it. A gradient border is two backgrounds: a solid painted over the padding box and the gradient under the border box, with a transparent border of the width you want. The Text and Border previews here render both, and the copied CSS is the background-image they share.
- Does the Tailwind output work with Tailwind v4?
- Yes. The Tailwind tab emits an arbitrary-value class, bg-[image:…], with spaces written as underscores, which is the v3 and v4 grammar for a one-off value. A mesh gradient needs its base color too, so it emits two classes. For a value you reuse, copy the Token tab instead and register it as a custom property in your theme.
Put it on a theme
A gradient is only as good as the palette it is mixed from. Build the eight-role palette first with the palette generator, then tint the gradient from its primary — the reference guide shows every pattern mixed from theme tokens so both modes stay in key.