The CSS Gradient Generator lets you build linear, radial, and conic gradients visually and copy the code. Pick your colors, drag the position sliders, set the angle, and the live preview updates instantly. When it looks right, copy the CSS or the Tailwind version and drop it into your project.
You can add as many color stops as you like, reorder them by position, and switch between a linear gradient (with a full 0–360° angle), a radial gradient, and a conic gradient. Start from one of the presets or build your own from scratch. Everything runs in your browser.
How to create a CSS gradient
- Choose Linear, Radial, or Conic, and set the angle for linear and conic gradients.
- Pick colors and drag each stop’s position, or click a preset to start.
- Add or remove color stops until the preview looks right.
- Copy the CSS (background) or the Tailwind class.
CSS vs. Tailwind output
- CSS — a ready-to-use rule: background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
- Tailwind — an arbitrary-value class: bg-[linear-gradient(...)], which works in any Tailwind version.
- Linear gradients use an angle; radial gradients spread out from the centre.
- Add multiple color stops for smooth multi-colour blends.
Frequently Asked Questions
How do I create a CSS gradient?
Use the CSS gradient property: background: linear-gradient(angle, color1, color2). This tool builds that for you visually — set the colors, positions, and angle and copy the result.
What is the difference between linear and radial gradients?
A linear gradient blends colors along a straight line at a given angle. A radial gradient blends outward in a circle or ellipse from a centre point. You can switch between them with the Type toggle.
Does it output Tailwind CSS?
Yes. Alongside the plain CSS, it gives you a Tailwind arbitrary-value class like bg-[linear-gradient(...)], which is correct in any Tailwind version and supports custom angles, colors, and radial gradients.
Can I use more than two colors?
Yes — add as many color stops as you like and position each one along the gradient for smooth multi-colour effects.
Is the gradient generator free?
Yes — it is free, needs no sign-up, and runs entirely in your browser.