CodeKitHubWhat Is This Tool?
CSS gradients are images generated by the browser from a list of colors, rather than files you upload — linear-gradient() transitions colors along a straight line at a given angle, while radial-gradient() transitions colors outward from a center point. Both accept two or more color stops, each optionally pinned to a position along the gradient.
Written by hand, gradients are easy to get subtly wrong: stop order, missing percentages, or an angle value in the wrong direction (CSS angles run clockwise from 'to top', unlike math angles). This tool keeps the syntax out of the way — set colors and positions with pickers and sliders, watch the preview box update in real time, and copy the resulting CSS once it looks right.
Source: CSS Images Module Level 3, W3C — the specification defining linear-gradient() and radial-gradient() syntax.
Why Use It?
- Live preview updates instantly on every color, position, and angle change — no need to reload a page to see the result.
- Switch between linear and radial gradients with one click; the angle control automatically hides for radial gradients, where it doesn't apply.
- Add or remove color stops (2 to 4) instead of being limited to a fixed two-color gradient.
- Each stop has its own position slider, so stops don't have to be evenly spaced.
- Outputs ready-to-paste CSS using the standard linear-gradient()/radial-gradient() syntax.
- Runs entirely in your browser — nothing you configure is uploaded anywhere. Free, no signup, works on mobile.
How to Use
- Choose Linear or Radial as the gradient type.
- For a linear gradient, drag the angle slider — 90deg goes left-to-right, 180deg goes top-to-bottom, and so on.
- Set the color and position for each stop; the first stop is the gradient's starting color, the last is its ending color.
- Click '+ Add stop' to add up to 4 total stops for a multi-color gradient, or the ✕ button to remove one (minimum of 2).
- Copy the generated CSS and paste it into a background or background-image declaration.
Example
Input
Linear · Angle: 90deg · Stops: #f97316 at 0%, #ec4899 at 100%Output
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);A left-to-right orange-to-pink gradient — a common style for buttons, banners and hero backgrounds.
Linear vs. radial gradients
A linear gradient transitions color along a straight line, controlled by an angle — useful for banners, buttons, and directional backgrounds. A radial gradient transitions color outward from a center point in expanding rings, which suits spotlight effects, badges, or glow-style backgrounds. This tool defaults the radial gradient to a circle shape centered in the box, which covers the most common radial use case; CSS also supports ellipse shapes and off-center positions if you need to hand-edit the output further.
Common gradient patterns
- Subtle brand accent: two close hues (e.g. two shades of the same color) at a shallow angle for a soft background wash.
- High-contrast CTA button: two saturated, complementary colors at 90deg or 135deg for a bold, clickable look.
- Overlay on an image: a gradient from transparent to a solid color (set opacity via an rgba color in the picker's underlying hex, or adjust after copying) layered over a background-image.
- Multi-stop rainbow/brand gradient: 3–4 stops spaced across the full 0–100% range for smoother, more gradual transitions than a two-color gradient allows.
- Radial spotlight: a bright center stop near 0% fading to a darker edge stop near 100%, useful for hero sections or card highlights.
Pairing with other CSS tools
Gradients are often combined with rounded corners and shadows on the same element — a gradient card with a soft box-shadow and rounded corners is a common UI pattern. Generate each piece separately and combine the CSS declarations on the element.
→ Box Shadow Generator · Border Radius Generator · Color Picker
Frequently Asked Questions
What's the difference between linear-gradient() and radial-gradient()?
linear-gradient() transitions colors along a straight line at a specified angle. radial-gradient() transitions colors outward from a center point in expanding shapes (circle or ellipse). Both accept the same kind of comma-separated color-stop list; only the shape of the transition differs.
How do CSS gradient angles work?
CSS gradient angles run clockwise starting from 'to top' (0deg pointing up). 90deg points right, 180deg points down, and 270deg points left — the opposite convention from standard math angles, which is a common source of confusion when writing gradients by hand.
Can I use more than 4 color stops?
Yes — CSS gradients accept any number of comma-separated color stops. This tool caps the interactive builder at 4 for a manageable UI, but you can copy the generated CSS and manually add more comma-separated 'color position%' entries in your stylesheet.
Why does my gradient look banded instead of smooth?
Banding usually comes from colors that are too far apart in hue with too few stops between them, or from the browser's own limited color precision at very low contrast. Adding an intermediate stop with a blended color, or picking colors closer in hue, generally produces a smoother-looking result.
Can I animate a CSS gradient?
Not directly — gradients aren't natively animatable the way background-position or transform are, since browsers can't interpolate between two arbitrary gradient definitions. Common workarounds include animating background-position on an oversized gradient, or transitioning background-color if only a single color is changing.