Gradient Generator

A gradient workbench with two modes. Explore is a curated collection of 42 gradients grouped by use: warm, cool, pastel, dark, vibrant, hero backgrounds, and UI backgrounds. Create is an editor for linear, radial, and conic CSS gradients with 2 to 6 color stops.

1. 1.Browse Explore and filter by group, or switch to Create.
2. 2.Copy CSS or a Tailwind class from any card, or open it in the editor.
3. 3.In Create, choose the type and angle, then edit each stop with the color picker, hex field, and position slider.
4. 4.Use Randomize (seeded), Reverse, Add stop, or Reset.
5. 5.Copy CSS, Tailwind, or SVG, or export a PNG at a preset size.

CSS output includes a solid background-color fallback plus background-image. The Tailwind output is an arbitrary-value class such as bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)], where spaces become underscores. SVG output covers linear and radial gradients. PNG export draws the gradient natively on a canvas at Full HD, Open Graph, square, story, banner, or QHD size. The same seed always produces the same random gradient.

SVG has no native conic gradient, so conic gradients export as CSS or PNG only. Conic PNG export needs a browser that supports canvas conic gradients. Favorites and saved gradients are stored only in this browser (localStorage) and are not synced. Every preview and export is generated on your device.