# Gradient Generator

> Free CSS gradient generator. Build linear, radial and conic gradients with draggable colour stops and presets, then copy the CSS background or a Tailwind CSS class.

Use it online: https://pixelpapa.com/tools/gradient-generator

Pick a gradient type, set the angle, then drag colour stops along the bar to shape the blend. The output updates live as standard CSS (background: linear-gradient(…)) and as a Tailwind arbitrary-value class you can paste straight into className.

## Questions

### How do I use a CSS gradient in Tailwind CSS?

Copy the Tailwind tab's output. It is an arbitrary-value class such as bg-[linear-gradient(135deg,#1d4ed8_0%,#38bdf8_55%,#a78bfa_100%)] that works in Tailwind CSS v3 and v4 without any config.

### What is the difference between linear, radial and conic gradients?

A linear gradient blends along a straight line at an angle, a radial gradient blends outward from a centre point, and a conic gradient sweeps around a centre point like a colour wheel.