How do I use the generated CSS?

Click the Copy button to copy the full CSS value, then paste it into your stylesheet as `background: ;`. The output is valid CSS compatible with all modern browsers.

CSS Gradient Generator - Create Beautiful Gradients Online Free

Create linear and radial CSS gradients with a live preview and copy-ready code

Color Tools

Tool

Gradient Type

Angle (0–360°)

Color Stops

Stop 1

Stop 2

Preview

CSS Output

background: linear-gradient(135deg, #6366f1, #ec4899);

How to Use

1Choose gradient type: Linear or Radial
2For linear gradients, set the angle (0–360°)
3Pick start and end colors using the color pickers
4Click "Add Color Stop" to add up to 5 color stops
5See the live gradient preview update in real-time
6Click "Copy" to copy the CSS value to your clipboard

Frequently Asked Questions

A linear gradient transitions colors along a straight line at a specified angle. A radial gradient radiates colors outward from a central point in a circular pattern.

You can add up to 5 color stops. Each stop represents a color point in the gradient transition. Use more stops to create rich, multi-colored effects.

Click the Copy button to copy the full CSS value, then paste it into your stylesheet as `background: <value>;`. The output is valid CSS compatible with all modern browsers.