CSS Gradient Generator
Dial in linear / radial gradients with 2–3 color stops, drag angle and position sliders and copy the CSS directly.
>_ USAGE GUIDE
Pick 2–3 color stops and dial in a linear or radial gradient in real time: angle and position sliders update the preview as you drag, and the CSS code is ready to copy the moment it looks right. Building a page header background, a button fill, or a card decoration no longer means memorizing linear-gradient(135deg, #667eea, #764ba2) — tune it visually, then take the code.
- Add color stops: two for a simple fade, three when the transition character matters
- Choose the type: pick linear or radial, then adjust the angle or center position with the sliders
- Copy the CSS: the generated declaration drops straight into your stylesheet
Three-stop gradients let the middle stop shape the transition; stop positions and gradient angle are both visually adjustable. For reusable brand assets, regenerate with the same stops whenever the palette changes and update the copied CSS — the visual tuning never needs redoing from scratch. Rendering is local with zero latency.
>_ FAQ
Q1 · When should I choose a linear gradient versus a radial one?
Linear transitions along one direction — top-left to bottom-right, for example — and suits banners, headers, and buttons; roughly 90% of UI gradients are linear. Radial spreads outward from a center point and suits light effects, focus spots, and ambient backgrounds. When unsure, start with linear and switch to radial when you need a sense of a light source.
Q2 · What does the gradient angle mean — where does 135deg point?
The CSS angle describes the direction the gradient travels: 0deg points up, 90deg right, 180deg down. 135deg therefore fades toward the bottom-right — the most common diagonal setup, "top-left to bottom-right". The angle slider here is visual, so drag until it looks right and copy; no direction table to memorize.
Q3 · Why does my gradient turn gray and muddy in the middle?
A direct two-color transition passes through a blending zone, and certain hue pairs — especially blue to red — cross a murky gray-purple in between. Fixes: add a middle color stop and steer the transition explicitly; pick hues that sit closer on the color wheel; or reduce the saturation gap between the ends. It is a property of color mixing, not a bug in your code.
Q4 · The gradient does not show in an old browser — what now?
linear-gradient has been standard for years and every modern browser, mobile included, supports it. Only legacy targets (IE) need a -webkit- prefix or a solid fallback. The robust pattern: declare a plain background color first, then the gradient — old browsers keep the solid color and modern ones overwrite it with the gradient.
Q5 · How do I make gradient text?
Set the gradient as the text's fill with the classic trio: background: linear-gradient(...), -webkit-background-clip: text, and color: transparent. This tool generates the gradient itself; wrap those three lines around it. Keep a fallback: in environments without clip support the color value must remain visible, or the text vanishes.