Overview
A client-side builder for the three CSS gradient images: linear-gradient, radial-gradient and conic-gradient. You pick a type, drag an angle, and stack up to eight color stops with per-stop positions, then copy plain CSS, a Tailwind arbitrary-value class, or an SVG equivalent. Nothing leaves the browser; the preview repaints as you move any slider.
How It Works
Choose linear, radial or conic from the segmented control. For linear and conic gradients an angle slider from 0 to 360 degrees appears; radial hides it because the output is always a circle centered in the box. Add stops with the Add Stop button up to a maximum of eight, set each color with the picker or a hex field, and set its percentage position. Seven curated presets such as Sunset Blaze and Conic Spectrum fill everything in one click. The code panel below the preview shows the background declaration, and separate buttons copy it as CSS, as a Tailwind class, or as SVG.
Step-by-Step Usage Guide
- Pick linear, radial or conic from the type buttons.
- Set the angle with the slider, or skip this for radial.
- Add color stops, choose colors, and set each stop position.
- Copy the CSS, the Tailwind class, or the SVG from the export bar.
Technical Specifications & Standards
Stops are sorted by position before serialization, so a stop you added at 10% and later dragged to 90% still lands in the right slot. The CSS spec (CSS Images Module 4) interpolates gradient colors in premultiplied sRGB by default, which is why some pairs produce a muddy midpoint; newer browsers accept an explicit interpolation hint such as in oklab, but this tool emits plain sRGB stops so the output stays maximally compatible. Conic gradients sweep from the given angle clockwise around the center and are supported in Chrome 69+, Firefox 83+ and Safari 12.1+, so they are the least safe export target. The SVG export always draws a simple two-anchor linear gradient regardless of the type you selected, so treat it as a fallback sketch, not a faithful copy.
Targeted Use Cases
- Hero section backgrounds that need more depth than a flat color.
- Conic sweep rings and progress-style decorations with hard color steps.
- Radial glows behind cards or avatars on dark landing pages.
- Quick SVG gradient fallbacks for email templates or image placeholders.
Notes & Gotchas
- Keep two stops at the same position when you want a hard edge instead of a blend.
- Prefer linear gradients for large surfaces; conic gradients render fine everywhere current but fail on older Safari.
- Limit yourself to three or four stops on text-sized elements to avoid visual noise.
- Test the exported Tailwind class in your build, because arbitrary values with underscores are easy to mistype.
Frequently Asked Questions
How many color stops can this gradient generator hold?
Eight is the hard maximum and two is the minimum enforced in the UI. Each stop takes an independent color and percentage position, and the output sorts them by position, so insertion order does not matter.
Why is there no angle slider for radial gradients?
The tool emits a fixed radial-gradient with the circle centered in the element, and a circle has no direction to set. Angle only applies to linear gradients and to the from-angle of conic gradients.
Does the generated CSS work in every browser?
Linear and radial gradients work in every browser released in the last decade. Conic gradients need Chrome 69+, Edge 79+, Firefox 83+ or Safari 12.1+, so check your analytics if you must support older Safari.
Can I export the gradient as Tailwind CSS?
Yes. The Tailwind button copies an arbitrary-value background class with spaces replaced by underscores, which is how Tailwind expects multi-token values inside brackets. Paste it directly onto an element.