CSS Gradient Generator

Three gradient types are supported — Linear gradient with full 0 to 360 degree angle control using slider or dial, Radial gradient with circle or ellipse shape and 9 position options (center, corners, edges), and Conic gradient which creates pie-chart style gradients. All types update live in the preview.

Click Add to add a new color stop — up to 6 stops supported. Each stop has a color picker, position slider (0% to 100%) and opacity control. Click the X button to remove a stop (minimum 2 required). The Reverse Colors button flips all stops. Random Gradient creates a completely new random gradient instantly.

The CSS code appears automatically below the preview. Click Copy to copy the full background CSS property. Switch between CSS, Tailwind and React Style tabs for different code formats. CSS gives the standard background property, Tailwind gives utility class equivalents and React gives the inline style object format.

Yes! Click Export PNG for a transparent-friendly PNG file or Export JPG for a JPEG file. All exports are 1200x630 pixels — perfect for social media thumbnails, Open Graph images, YouTube thumbnails or design mockups. The exported image matches exactly what you see in the preview.

30 beautiful pre-designed gradients are available in 5 categories — Warm (Sunset, Mango, Fire, Dusk), Cool (Ocean, Emerald, Aurora, Teal), Dark (Cosmic, Midnight, Neon, Obsidian), and Pastel (Spring, Rose Gold, Lavender, Bloom). Click any preset to instantly apply it and then customize further. Search or filter by category.

Click the Save button (heart icon) to save the current gradient to your browser. Up to 12 favorites can be saved. Saved gradients appear as colored swatches at the bottom — click any to instantly apply it. Favorites are stored in localStorage and persist across browser sessions until you clear them.