CSS Gradient Generator
Pick your colors and angle, preview the gradient live, and copy the ready-to-use CSS.
Options
CSS
background: linear-gradient(90deg, #2563eb, #9333ea);
Processed on your device — nothing is sent anywhere.
How it works
- Choose two colors with the color pickers, or add a third stop under Options.
- Switch between linear and radial, and drag the angle slider to rotate a linear gradient.
- Copy the generated CSS and paste it into your stylesheet.
Frequently asked questions
- What is the difference between a linear and a radial gradient?
- A linear gradient blends colors along a straight line at a given angle, for example top to bottom or left to right. A radial gradient starts from a center point and blends colors outward in a circular or elliptical shape. Linear gradients are the more common choice for backgrounds and buttons.
- How does the angle value work in CSS gradients?
- The angle sets the direction of a linear gradient: 0deg points up, 90deg points right, and 180deg points down. The color stops are laid out along that line in order. Radial gradients ignore the angle because they expand outward from the center instead of following a line.
- Which browsers support the generated CSS?
- The unprefixed linear-gradient() and radial-gradient() syntax used here works in every modern browser, including Chrome, Firefox, Safari, and Edge. Vendor prefixes like -webkit- have not been needed for years, so the generated code can be used as-is in production.
- Can I use more than two colors in a CSS gradient?
- Yes. CSS gradients accept any number of comma-separated color stops, and this tool lets you add a third stop under Options. The stops are distributed evenly unless you give them explicit positions in the code. Two or three well-chosen colors usually look cleaner than many, because each extra stop adds another transition zone.
- Why does my gradient look muddy or gray in the middle?
- Browsers blend gradient colors in the sRGB color space, and mixing two hues from opposite sides of the color wheel — like blue and yellow — passes through desaturated gray territory. Choose colors that are closer in hue, or add a middle stop with a vivid intermediate color to steer the transition around the gray zone.
About this tool
This CSS gradient generator builds ready-to-use gradient code visually. Pick two colors — or add a third stop — choose between a linear and a radial gradient, and drag the angle slider to rotate the direction. The preview updates live with every change, and the generated CSS is always visible below it, ready to copy into a stylesheet with one click.
The output uses the standard linear-gradient() and radial-gradient() functions that every modern browser supports without vendor prefixes, so the code works as-is in production. The tool itself is plain client-side JavaScript: color choices never leave your device, there is nothing to install or sign up for, and it keeps working offline once the page has loaded. What you see in the preview is exactly what the browser will render, because it is the same CSS.
Gradients show up everywhere in interface work: hero section backgrounds, buttons and call-to-action elements, subtle card and header washes, dark overlays that keep text readable on photos, and decorative accents behind illustrations. A generator is faster than hand-editing values because judging a gradient is visual work — small changes in hue or angle read very differently on screen than they look in code.
A few tips from practice: pairs of colors that sit near each other on the color wheel — blue into violet, orange into pink — blend smoothly, while complementary pairs tend to pass through a muddy gray midpoint unless you add an intermediate stop. Keep text contrast in mind across the entire gradient, not just at one end; the lightest region is usually the constraint. And for very subtle gradients over large areas, choose endpoint colors that are not too close together, since a difference of only a few RGB steps can produce visible banding on some displays.