CSS Gradient Generator — Linear, Radial, Conic & Animated

You need a CSS gradient for a hero background, a gradient text heading, or a gradient card border — but writing linear-gradient(135deg, #667eea 0%, #764ba2 100%) from memory is tedious, and every small tweak means running back to the browser. Build it here visually, see it live in the exact context you need, and copy the complete CSS with one click.

The interactive gradient bar shows each color stop as a draggable handle. Drag to reposition stops. Click anywhere on the bar to add a new stop — the color is auto-interpolated from the gradient at that exact position so new stops blend naturally. Select any stop to change its color or opacity. Three gradient types: linear (any angle), radial (circular outward from a center), and conic (rotational sweep, useful for color wheels and pie charts).

Three preview modes let you see the gradient in the context you actually need. Background fills the preview area — for hero sections and full-bleed backgrounds. Text clips the gradient to display typography using background-clip: text — for gradient headings and logos. Border shows the gradient as a card outline and filled button simultaneously. The CSS export updates automatically for whichever mode is active, including the correct -webkit-background-clip prefix for Safari.

For animated gradients, six presets generate complete @keyframes CSS with no JavaScript required: Slide (flowing background-position), Diagonal (corner-to-corner), Hue Shift (hue-rotate cycle), Breathe (background-size pulse), Pulse (opacity fade), and Spin (angle rotation via @property). Adjust speed from 1s to 12s and copy the full animation block for your stylesheet.

Click-to-add works by linearly interpolating between the two nearest stop colors at the click position — the bar sorts stops by percentage, finds which pair straddles the clicked point, and blends their RGB channels by the fractional distance between them, so a new stop always starts as a believable blend rather than a jarring random color. The bar tells a click on empty space apart from a press on an existing handle by comparing the event target directly against the bar element itself, which is what lets dragging a handle and clicking to add a stop share the same element without misfiring. The Spin preset is the one animation that can't be done with plain background-position tricks, because you can't animate a gradient's angle argument directly — CSS has no keyframe-able "gradient angle" property by default. It works around that by registering a custom property with @property and an explicit <angle> syntax, which tells the browser the property is animatable, then keyframes that custom property from 0deg to 360deg and feeds it into the gradient with var(); this is why the exported Spin CSS is the only preset marked Chrome/Edge only, since @property isn't supported everywhere. The Tailwind export only maps to a named direction class (bg-gradient-to-br and friends) for the eight compass angles Tailwind ships utilities for; any other angle, or any gradient with more than two stops, falls back to Tailwind's arbitrary-value bracket syntax with the full CSS gradient string inlined. Every setting — mode, stops, angle, animation, preview mode — auto-saves to localStorage 600ms after your last change and silently restores on your next visit.