CSS Gradient Generator

A CSS gradient generator is a visual tool that lets you create gradient backgrounds by adjusting color stops, angles, and gradient types (linear, radial, conic), then automatically generates the CSS code you can copy into your stylesheet.

Select Linear gradient type and set the angle to 90°. This produces background: linear-gradient(90deg, color1, color2) which transitions from left to right. You can also use the direction keyword "to right" (equivalent to 90deg).

Yes — click "Add Stop" to add up to 8 color stops. Each stop has an independent color and position percentage. Drag the stops on the gradient bar to adjust their positions.

Click "Copy Tailwind" to copy the class string. For 2-stop linear gradients with standard angles, it uses Tailwind utilities (bg-gradient-to-r from-[…] to-[…]). For complex gradients it falls back to an arbitrary value class.

Yes. Select the Conic type to create pie chart and color wheel effects. Set the start angle with the angle slider, and adjust color stop positions to control the sweep of each color segment.