CSS gradients are how modern web design does color transitions — backgrounds, button highlights, hero panels, decorative dividers. The CSS syntax for them is straightforward once you know it (linear-gradient(90deg, red, blue)) but the visual decisions (which angle, how many stops, where to place them) are easier with a live preview than by typing values blind.
This tool gives you a visual builder for all three modern gradient types: linear (the most common), radial (centre-out), and conic (around a circle). The CSS updates as you drag, so you can iterate the visual decision and copy the result when it looks right.
How linear gradients work
A linear gradient blends colors along a straight line at a chosen angle. Per CSS convention, 0° points up (toward the top of the element), 90° points right, 180° points down, 270° points left. The colors interpolate smoothly between consecutive stops.
background: linear-gradient(90deg, #FF6B6B 0%, #FFD93D 100%);Two-stop linear is the most common case — a smooth blend from one color to another. Adding more stops gives you a multi-color sweep with control over where each color sits.
How radial gradients work
A radial gradient blends colors outward from a centre point. The shape (ellipse or circle) and extent keyword (closest-corner, closest-side, farthest-corner, farthest-side) determine how the gradient sizes itself relative to the element.
background: radial-gradient(circle farthest-corner at 50% 50%, #FFD86F 0%, #FC6262 100%);Useful for spotlight effects, vignettes, and any “centre-bright, edge-dark” composition.
How conic gradients work
A conic gradient blends colors around a centre point in a circle, like a pie chart or a colorwheel. The start angle controls where the first color begins (0° = up, then clockwise).
background: conic-gradient(from 0deg at 50% 50%, red 0%, yellow 17%, green 33%, cyan 50%, blue 67%, magenta 83%, red 100%);Useful for colorwheels, loading spinners, and pie-chart-like decorative elements.
Example: button highlight
A subtle vertical gradient from light to slightly darker creates a soft 3D-ish button effect. Linear gradient, 180° angle, two stops: #5A6FA8 at 0%, #4A5F98 at 100%. The CSS output goes straight into the button’s background: property. For the companion depth shadow, the box-shadow generator builds the layered shadow you’d stack under it.
Example: hero section background
A diagonal gradient spanning the warm part of the spectrum makes for an attention-grabbing hero. Try the “Sunset” preset (135° linear, #FF6B6B to #FFD93D) as a starting point, then adjust the colors and angle to fit your brand.
Example: skeleton loading shimmer
A skeleton-loader animation usually combines a static gradient with CSS keyframes that translate the gradient horizontally. Build the static three-stop gradient here (gray, lighter gray, gray), copy the CSS, then add background-size: 200% 100%; animation: shimmer 1.5s infinite; and the matching keyframe in your stylesheet.
Common mistakes
Two stops at the same position. Creates a hard edge. Useful for stripes and color blocks; surprising if you wanted a smooth blend. Separate the stops by at least 1% for a smooth transition.
Confusing angle conventions. CSS gradients use 0°-up convention; older browsers used 0°-right. The visual builder uses the modern CSS spec. If your gradient looks rotated 90° from what you expected when you copy the CSS to another system, that system might be using the older convention.
Building a transparent gradient with a hex color picker. The HTML color input only handles hex, which has no alpha channel. To create a fade-to-transparent effect, type rgba(255, 0, 0, 0) directly into the color text field instead of using the picker. If you need to translate an HSL mockup into the hex the picker wants, the hex/RGB/HSL converter handles that round-trip.
Forgetting that gradients are backgrounds, not foregrounds. CSS gradients work as background-image (or shorthand background). They don’t apply to text directly without background-clip: text plus color: transparent — that’s a separate technique.
What this tool does not do
It doesn’t generate background-clip: text text gradients. The output is a background: declaration; for gradient text, add the clip + transparent color manually.
It doesn’t produce vendor-prefixed CSS. Modern browsers haven’t required prefixes for gradients since around 2018; if you need to support very old browsers, add prefixes manually.
It doesn’t handle image() syntax or other less-common gradient sources. The output is the standard linear-gradient() / radial-gradient() / conic-gradient() form.
It doesn’t animate gradients. For animation, copy the static gradient and add CSS keyframes in your stylesheet.