CSS gradient generator: linear, radial and conic layers
Compose layered linear, radial and conic gradients with OKLCH colour stops and export CSS, a Tailwind v4 token or a React surface. Free to use, no account.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this generator
Stack as many gradient layers as the background needs and reorder them. Each layer is linear, radial or conic, with its own angle, position and colour stops. Stops can be interpolated in OKLCH, which keeps mid-points from turning grey.
Colours can reference your theme tokens, so the same gradient works in light and dark mode. Export it as CSS custom properties, a Tailwind v4 theme token for background-image, or a TSX surface component.
Presets give you a starting point and the whole state is kept in the URL.
How to use it
- Add a layer and choose linear, radial or conic.
- Edit the colour stops, angle and position.
- Reorder layers to change what shows on top.
- Copy the CSS or the Tailwind v4 token.
This generator is also a component of the kit: Generator Gradient Builder, installed as source in your project.
Want this inside your project?
Agentic UI Kit installs this generator and the other 1156 components as source files, with one theme for all of them. One-time license, unlimited projects.