Pick a gradient type, set direction or focal point, edit stops, and copy the CSS.
Step 1
Pick a type
Linear, radial or conic. Toggle the repeating variant if you want the stops to tile.
Step 2
Add stops
Each stop is a colour and a position 0–100%. Two minimum; add as many as you need.
Step 3
Copy the CSS
Output is a standard background declaration — drop it into your stylesheet or Tailwind arbitrary value.
In-depth guide
Gradient generator — build linear, radial and conic CSS gradients
Compose a CSS gradient interactively: pick the type, set the direction or focal point, add as many colour stops as you need, and copy the resulting background declaration. Linear, radial and conic — plus their repeating variants — are all supported. Everything runs in your browser; no colour ever leaves the page.
Three gradient types, three control schemes
Each CSS gradient function takes different controls:
Linear — a single angle. 0° points up, 90° points right, 135° flows from top-left to bottom-right.
Radial — a shape (circle / ellipse), a size keyword, and a center in percent. The shape grows from the centre outwards.
Conic — a starting angle and a center. Colours sweep around the centre, useful for pie-chart and color-wheel effects.
All three can be flipped to their repeating-*-gradient form to tile the pattern. With closely-spaced stops that gives you striped backgrounds without an image.
Colour stops
Each stop is a colour string plus a position (0–100%). Any valid CSS colour works — HEX, rgb(), hsl(), oklch(), named colours (tomato), even 8-digit hex with alpha. Invalid strings are flagged inline so you can fix them before exporting.
Stops are sorted automatically by position before the CSS is emitted, so you don't have to add them in order. The minimum is two stops.
Using the exported CSS
Copy the output and drop it into a background or background-image declaration. For Tailwind, wrap it in an arbitrary value: bg-[linear-gradient(...)]. The output uses standard CSS — no vendor prefixes, which haven't been needed for gradients since around 2014.
If you want gradients as design tokens, paste the function into a CSS variable: --brand-grad: linear-gradient(...), then reference it with background: var(--brand-grad) everywhere you need it.
Privacy & safety
The generator parses colours, renders the live preview and emits the CSS string all locally. There's no upload, no analytics call on every keystroke, and the page works fully offline once loaded.
When to use it vs alternatives
Use this tool for quick exploration, generation, previewing, and handoff values. Use your design system, brand guidelines, or accessibility review workflow when choices need formal approval.
Common pitfalls
Preview colours and generated assets in the context where users will actually see them.
Accessibility, contrast, and readability matter more than a palette looking good in isolation.
Generated values are a starting point; check names, formats, and edge cases before shipping.
Frequently asked questions
Does the gradient generator send my colours anywhere?
No. Everything — parsing, the live preview, the CSS export — runs in your browser. Nothing leaves the page.
Which gradient types are supported?
All three CSS gradient functions: linear-gradient (along an angle), radial-gradient (from a focal point), and conic-gradient (sweep around a point). Each can be toggled to its repeating-* variant for stripe-style patterns.
Can I use HEX, RGB, HSL or named colours in the stops?
Yes. Each stop accepts any valid CSS colour string — #ff0080, rgb(255 0 128), hsl(330 100% 50%), tomato, oklch(0.7 0.2 30) — and renders as-is in the CSS output. Invalid strings are flagged inline.
What is the angle for linear gradients?
0° points up, 90° to the right, 180° down, 270° to the left. So 135° flows from the top-left to the bottom-right. CSS uses this same convention.
Why use `repeating-*-gradient` over the regular version?
Regular gradients stop at the last stop. The repeating variants tile the stop pattern across the whole shape — handy for diagonal stripes, sunburst rays and barber-pole effects when paired with closely-spaced stops.
What do the radial size keywords mean?
They control where the outermost colour stop lands relative to the box. `closest-side` and `farthest-side` measure to the nearest/furthest edges; `closest-corner` and `farthest-corner` measure to the nearest/furthest corners. `farthest-corner` is the CSS default.
Can I drag stops to reorder them?
Reorder by editing each stop's position — they're sorted automatically before emitting CSS. You can also add or remove stops; the minimum is two.
Will the CSS output work in every browser?
linear-gradient and radial-gradient are universally supported. conic-gradient is supported in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+). The output uses standard syntax with no vendor prefixes — none are needed in 2024+.
Keep exploring
More tools you'll like
Hand-picked utilities that pair well with the one you're on — all
free, client-side, and zero-signup.