CSS Gradient Generator
Pick colors, choose a direction, and copy ready-to-use CSS, updates live as you tweak it.
About the CSS Gradient Generator
Pick two colors, choose linear or radial, and adjust the angle to see the preview update in real time. The output is a single background value ready to paste straight into a stylesheet.
CSS gradient angles don't work like a math class unit circle
This trips up a lot of people the first time: in standard math convention, 0 degrees points right and angles increase counter-clockwise. CSS linear gradients use a completely different convention, 0deg points straight up toward the top of the element, and angles increase clockwise from there. So 90deg points right, 180deg points straight down, and 270deg points left. The default angle here, 135deg, points toward the bottom-right corner, a diagonal that's become something of a default choice across countless UI designs precisely because it reads as a natural, pleasant light-source direction rather than a flat horizontal or vertical band of color.
Why the radial option is locked to a perfect circle
CSS radial-gradient() actually defaults to an ellipse shape if you don't specify otherwise, one that stretches to match the aspect ratio of whatever box it's applied to, a wide rectangle gets a wide, squashed-looking radial gradient rather than a round one. This tool always writes the explicit circle keyword instead, forcing the gradient to stay perfectly round regardless of the element's own width-to-height ratio, which tends to look more intentional and controlled on non-square elements like buttons or wide banner sections. If you specifically want the ellipse behavior that matches the box shape, you'd remove the circle keyword from the copied CSS.
A real limitation: only two color stops
Both gradient functions accept an unlimited, comma-separated list of colors, plus optional percentage positions for each one (like linear-gradient(135deg, red 0%, yellow 50%, blue 100%) for a three-color gradient with an explicit midpoint). This tool only exposes two color pickers, which covers the large majority of real UI gradients but can't build a rainbow-style or multi-band gradient directly. To add a third color, copy the generated CSS and manually insert another comma-separated color (with an optional percentage) between the two existing stops.
Why the output uses background, not background-image
The generated declaration uses the background shorthand property rather than the more specific background-image. This matters if you're pasting the gradient into an element that already has other background-related rules applied elsewhere, like background-position or background-repeat, since the shorthand property resets every background sub-property it doesn't explicitly mention back to its default value. If you're layering this gradient onto an element with other existing background styling you want to preserve, switch background: to background-image: in the copied code so it only affects the image layer and leaves your other background properties untouched.
Direction keywords as a readable alternative to degrees
Beyond numeric angles, CSS linear gradients also accept plain-English direction keywords like to right, to bottom left, or to top, which some developers find more self-documenting in a stylesheet than remembering that 90deg means rightward. These keywords are exactly equivalent to their numeric angle counterparts under the hood (to right compiles to the same result as 90deg), so switching between the two forms is purely a readability preference, not a functional difference.
Gradients render instantly with no separate image request
Unlike a photographed or designed gradient background exported as a JPEG or PNG, a CSS gradient is computed by the browser at render time from a short text value, there's no separate network request, no file to load before the background appears, and no risk of a visible flash of unstyled color while an image downloads. This also means the gradient scales to any element size with zero extra bytes and stays perfectly crisp on any screen density, since it's mathematically generated rather than a fixed-resolution bitmap being stretched.
Frequently Asked Questions
Why does 0deg point up instead of right in a CSS gradient?
CSS gradient angles use a different convention from standard math angles. 0deg points to the top of the element and angles increase clockwise, so 90deg points right, 180deg points down, and 270deg points left, the opposite starting point and rotation direction from a typical math unit circle.
Why is the radial gradient always a perfect circle instead of an ellipse?
CSS radial-gradient() defaults to an ellipse that stretches to match the element's own aspect ratio unless you add the circle keyword explicitly. This tool always includes that keyword so the gradient stays round regardless of the element's shape, which tends to look more deliberate on non-square elements.
Can I add a third color to the gradient?
Not directly through this tool's interface, but the underlying CSS function supports unlimited comma-separated color stops. Copy the generated code and manually insert another color, optionally with a percentage position, between the two existing stops to build a three-or-more color gradient.
Why might I want to change "background" to "background-image" in the output?
The background shorthand resets every other background sub-property (position, repeat, size, and more) to its default if they're not explicitly included. If you're adding this gradient to an element that already has other background styling you want to keep, use background-image instead so only the image layer is affected.
Can I use "to right" instead of "90deg" in a linear gradient?
Yes, CSS linear gradients accept plain-English direction keywords like to right, to bottom left, or to top, which compile to exactly the same result as their numeric angle equivalents. Using keywords versus degrees is purely a stylistic choice for readability.
Does the radial gradient's center position stay fixed?
Yes, this tool always centers the radial gradient in the middle of the element. The full CSS syntax supports repositioning the center with an "at x y" clause, but that option isn't exposed in this generator's controls, so you'd need to add it manually to the copied code.