CSS Gradient Generator
Generate linear, radial, and conic CSS gradients with a live preview. Add up to 6 color stops, control angle and center position, and copy clean CSS or Tailwind classes. 100% browser-based, free, no signup.
#ff5e7a#7c3aed#06b6d4background: linear-gradient(45deg, #ff5e7a 0%, #7c3aed 50%, #06b6d4 100%);Three Gradient Types
Switch between Linear, Radial, and Conic gradients with one click. Adjust angle for Linear/Conic, and center position for Radial/Conic — all with smooth sliders and instant preview.
Live Preview
See your gradient render in real time as you move sliders or pick colors. Up to 6 color stops with independent 0-100% positions. Add and remove stops freely (min 2, max 6).
100% Browser-based
No server round-trip, no signup, no upload. Everything runs in your browser with the Web Crypto API for random gradients. Your colors and stops never leave the page.
Copy CSS or Tailwind
One click to copy production-ready CSS: `background: linear-gradient(...)`. Or copy as a Tailwind arbitrary value: `bg-[linear-gradient(...)]`. Plus a Random button for instant inspiration.
Is this CSS gradient generator free?
Yes — completely free, no signup, no daily limit, no watermark. Generate as many gradients as you like on any device. The tool is 100% browser-based.
What is the difference between linear, radial, and conic gradients?
A linear gradient transitions colors along a straight line at a given angle (0-360°). A radial gradient radiates outward from a center point (X/Y position). A conic gradient sweeps colors around a center point starting from a given angle, like a color wheel.
How many color stops can I add?
You can add from 2 up to 6 color stops. Each stop has a color picker and a 0-100% position slider. Use the Add button to append a stop, and the Trash icon on each stop to remove it (you must keep at least 2).
How do I use the generated gradient in my project?
Click "Copy CSS" to copy a ready-to-paste declaration like `background: linear-gradient(45deg, #ff5e7a 0%, #7c3aed 100%);`. If you use Tailwind CSS, click "Copy as Tailwind" to copy the arbitrary value class `bg-[linear-gradient(45deg,...)]`.
Does the Random button use a secure random source?
Yes — the Random button uses `crypto.getRandomValues` (the Web Crypto API) to pick colors and parameters, the same CSPRNG browsers use for TLS. No Math.random() anywhere in the code path.
Ready to use the CSS Gradient Generator?
Free, no signup, no watermark. 100% browser-based. Your data never leaves your device.
Open the tool