CSS Gradient Generator
Build linear and radial CSS gradients visually — add color stops, set the angle or shape, and copy the finished background: value. Everything runs locally in your browser.
What Is a CSS Gradient?
A CSS gradient is a smooth transition between two or more colors, generated by the browser rather than loaded as an image. Because it renders on the fly, a gradient background scales to any element size with no extra HTTP request, stays crisp on high-density screens, and can be swapped instantly with a class change. The background (or background-image) property accepts a linear-gradient() or radial-gradient() function, each taking a direction or shape argument followed by a comma-separated list of color stops.
Pick exact, well-matched color stops instead of guessing at hex values. Convert and compare colors in the Color Converter.
Linear vs. Radial Gradients
A linear gradient travels along a straight line at a chosen angle — 0deg points up, 90deg points right, and angles increase clockwise. It is the workhorse choice for buttons, headers, and full-page backgrounds where color should shift in one direction.
A radial gradient instead radiates outward from a center point, either as a circle (equal radius in all directions) or an ellipse (stretched to match the element's aspect ratio). Radial gradients suit spotlight or vignette effects, badges, and glow accents where the eye should be drawn to a single point rather than swept across the element.
Common Gradient Pitfalls
- Color banding. Gradients between two very different lightness values (near-black to near-white, for example) can show visible stripes on 8-bit displays, especially over a large area. Adding a third, intermediate color stop usually smooths the transition more effectively than fighting it with noise or dithering tricks.
- Email and legacy support. Every modern browser renders CSS gradients natively, but most email clients — Outlook chief among them — strip background-image entirely. If a gradient is going into an email template, set a solid background-color fallback close to the gradient's midtone so the layout still reads correctly.
- Stop position math. If you do not specify a position, the browser spaces stops evenly, which is rarely what you want once you are past two colors. Set explicit percentages for anything beyond a simple two-color fade, and keep them in ascending order to avoid the gradient rendering backwards over itself.
Picking the Right Tool for the Job
Reach for a linear gradient by default — it is cheap to reason about and covers the vast majority of UI needs, from subtle card backgrounds to bold hero sections. Switch to radial when you specifically want a focal point: a highlight behind an icon, a soft vignette around a photo, or a status glow. Multi-stop gradients work well for brand backgrounds but get harder to keep accessible — always check that any text placed over a gradient keeps enough contrast against the darkest and lightest points it crosses, not just the average.
Frequently Asked Questions
What is the difference between linear-gradient() and radial-gradient() in CSS?
linear-gradient() paints color along a straight line at a given angle, while radial-gradient() paints color radiating outward from a center point in a circle or ellipse. Both accept the same comma-separated list of color stops; only the shape of the transition differs.
Why does my gradient show visible banding?
Banding happens when a gradient spans a wide lightness range over a large area and the display cannot represent enough intermediate shades smoothly. Adding one or two extra color stops between the two endpoints usually fixes it, since it gives the browser more actual color values to interpolate between rather than stretching a single transition too far.
Do all browsers support CSS gradients?
Yes — linear-gradient() and radial-gradient() have been supported without vendor prefixes in every major browser for years. The one common gap is email clients: many, including Outlook, ignore background-image entirely, so email templates need a solid background-color fallback.
Can a CSS gradient use more than two colors?
Yes, both gradient functions accept any number of color stops — just keep adding comma-separated color/position pairs. Ordering stops by ascending position keeps the transition predictable; out-of-order positions cause the gradient to render back over itself.