Overview
What this tool does
A CSS gradient is a smooth transition between two or more colors used as a background. This generator covers all three CSS gradient types (linear, radial, conic), supports up to five color stops, and gives you both the raw CSS and a Tailwind arbitrary-value class you can drop straight into your markup. The preview tile updates as you adjust angle, colors, and stop positions. Useful for hero sections, button accents, brand backgrounds, and any time you want more visual interest than a flat color. 100% client-side, no signup.
How to
Use it in 3 steps
- Pick a gradient type: Linear (the most common, runs in a straight line), Radial (radiates from a center point), or Conic (sweeps around like a clock hand).
- For linear and conic gradients, drag the angle slider to set direction.
- Adjust each color stop with the color picker; drag its slider to change its position from 0% to 100%.
- Click 'Add stop' for up to 5 colors total. Use 'Reverse' to flip the gradient direction in one click.
- Copy the CSS or Tailwind class at the bottom and paste it into your styles.
FAQ
Frequently asked questions
▶What's the difference between linear and conic gradients?
Linear runs along a straight line at a given angle (0° = bottom-to-top, 90° = left-to-right, 180° = top-to-bottom, 270° = right-to-left). Conic sweeps in a circle from a center point, like a clock hand rotating; useful for color-wheel effects or pie-chart visuals.
▶Why doesn't the radial gradient have an angle?
Radial gradients emit from a center point in all directions, so angle isn't applicable. You can change the shape and position with extra parameters (circle vs ellipse, center vs corner) but this tool keeps it to the most common case (centered circle).
▶What's the Tailwind arbitrary value syntax?
Tailwind v3+ supports `bg-[image:linear-gradient(...)]` for any CSS value as a utility class. The underscore replaces spaces inside the brackets. This is the closest equivalent to copying raw CSS into a className.
▶Why are stops limited to 5?
Practical UX: more than 5 stops becomes hard to manage with sliders. CSS supports arbitrary stop counts; if you need more, edit the output by hand after copying.
▶Is anything sent to a server?
No. The gradient is generated as a CSS string in your browser and the preview is rendered by your browser's CSS engine. Nothing leaves your device.