CSS Gradient Generator
Pick your colors and angle below, and this css gradient generator builds the exact linear-gradient or radial-gradient CSS, ready to paste into your stylesheet.
About
About CSS Gradient Generator
A gradient generator gives you a visual canvas for blending colors instead of typing hex codes and angle values straight into a stylesheet and refreshing the browser to check them. This css gradient generator outputs standards-compliant linear-gradient() or radial-gradient() syntax the moment your design looks right, with no guesswork about angle direction or color stop positioning.
A linear-gradient needs an angle, which can be written in degrees or with directional keywords like "to right" or "to bottom left," and a list of color stops, each of which can optionally include a percentage marking exactly where it sits along that line. Leave the percentages out and the browser spaces every color evenly, which is fine for a simple two-color fade but often not what you want with three or more colors.
A radial-gradient works differently, spreading colors outward from a center point instead of along a straight line, and it defaults to an ellipse shape that stretches to match the element's own proportions unless you explicitly tell it to render as a perfect circle instead.
Pick your starting and ending colors with the color picker, then adjust the angle to control the direction of the blend. Click anywhere along the gradient bar to add another color stop, and drag any stop to reposition exactly where it sits in the transition.
The generated CSS pairs the standard property with the vendor-prefixed versions still used by some older browser builds, so the gradient renders consistently across Chrome, Firefox, and Safari without you having to track prefix support yourself. All of this builds and updates in your browser as you adjust it, with no server round-trip slowing down the back-and-forth of actually designing the thing.
FAQ
Frequently asked questions
What's the real difference between a linear and a radial gradient?
A linear gradient transitions colors along a straight line in whatever direction you set, top to bottom, a diagonal angle, anywhere in between. A radial gradient transitions outward from a center point in a circular or elliptical pattern instead.
How do I add a third or fourth color to my gradient?
Click anywhere along the gradient slider to drop in a new color stop at that position, then assign it a color and drag it along the bar to fine-tune exactly where the transition happens.
Will the generated code work correctly on mobile browsers?
Yes, CSS3 gradients have solid support across modern mobile browsers on both iOS and Android, so the code renders the same way it previews here.
Why does the output include more than one line of code for a single gradient?
To cover slightly older browser versions, the tool can include vendor-prefixed fallback rules alongside the standard syntax, which guarantees a closer visual match even on a browser that doesn't fully support the unprefixed property.
Can I apply a gradient to text instead of a background?
Yes, using background-clip: text together with a transparent text color lets a background gradient show through the letterforms themselves. This tool generates the gradient syntax itself, and you can apply that output to typography using that technique in your own CSS.
Does a CSS gradient slow down page load compared to an image?
No, actually the opposite. A CSS gradient is rendered by the browser directly and requires no image file to download, which generally makes it faster than a background image doing the same visual job.
Related tools
View all developer tools →CSS Box-Shadow Generator
Build a box shadow visually and copy the CSS.
Open toolCSS clamp() Calculator
Generate a responsive CSS clamp() value from a minimum and maximum size.
Open toolColor Contrast Checker (WCAG)
Check text and background color contrast against WCAG AA and AAA.
Open toolColor Picker
Pick colors from an image with an eyedropper and check contrast ratios.
Open tool