CSS Gradient Generator
Build a linear or radial CSS gradient from two colors, preview it live, and copy the ready-to-paste background rule - hex, rgb(), and hsl() all accepted.
Hex (#ff6b35), rgb(255, 107, 53), or hsl(16, 100%, 60%)
Hex (#004e89), rgb(0, 78, 137), or hsl(203, 100%, 27%)
Ignored for radial gradients, which always expand from the center
%22%2F%3E%3C%2Fsvg%3E)
Before browsers supported gradients natively, a smooth color transition meant exporting a PNG from a design tool, uploading it, and referencing it as a background-image - one more asset for the browser to fetch, cache, and repaint on every visit. A CSS gradient replaces that image with a single declaration the browser renders on the fly, so pages load faster and the transition stays crisp at any screen size or zoom level, no compression artifacts included. Linear gradients sweep along a straight line and are the workhorse for buttons, cards, and hero banners, where a left-to-right or top-to-bottom direction gives an otherwise flat surface some depth. Radial gradients expand outward from a center point instead, which suits spotlight effects, vignettes, and badge-style icons where the eye should land in the middle rather than follow an edge. Whichever format you type the two colors in, this tool normalizes both to hex in the generated rule, so the CSS you copy out is consistent and ready to paste straight into a stylesheet.
Examples
Set the start color to #ff6b35 (a warm orange) and the end color to #004e89 (a deep blue), with Gradient type Linear and direction Left → right. The tool outputs background: linear-gradient(to right, #ff6b35, #004e89); - a horizontal sweep from orange to blue, the exact rule you would hand-write for a horizontal button or banner background.
Switch Gradient type to Radial with those same two colors and the Direction field stops mattering entirely - radial gradients expand from the center outward, not along an axis. The result is background: radial-gradient(circle, #ff6b35, #004e89); - orange at the center fading out to blue at the edges, a pattern that reads as a spotlight or a glowing badge rather than a flat panel.
Keep Linear but pick direction Top-left → bottom-right (to bottom right) and the same orange-to-blue sweep now runs corner to corner: background: linear-gradient(to bottom right, #ff6b35, #004e89);. A diagonal sweep reads as noticeably more dynamic than a straight horizontal or vertical one, which is why it turns up so often in hero sections and app icons.
FAQ
Will this CSS gradient render the same in every browser?
Yes. Two-color linear and radial gradients with a keyword direction like to right have had universal support in evergreen browsers since around 2012 - there is no vendor prefix or fallback needed for the syntax this tool generates.
I need a third color in the middle - can this tool add another stop?
Not directly; this generator only handles a two-color transition. You can still get there by hand: take the generated rule and insert a third color plus a percentage between the existing two, for example linear-gradient(to right, #ff6b35, #ffd23f 50%, #004e89) - the browser accepts any number of comma-separated stops.
Can I use a gradient as text color instead of a background?
Yes, with one extra step this tool does not generate: apply the gradient as a background on the text element, then add background-clip: text together with color: transparent (and -webkit-background-clip: text for older WebKit browsers) so the gradient shows through the letter shapes instead of behind them.
I typed an rgb() or hsl() value - why does the copied CSS show hex instead?
The output always normalizes both colors to hex regardless of which format you typed, so the generated rule is consistent no matter whether your source was a design tool's hex swatch, a color picker's rgb() value, or an hsl() value copied from another stylesheet.
Is a CSS gradient better for page performance than a gradient image?
Generally yes - the gradient is computed by the browser from a short text rule, so there is no image file to request, download, or decode. A background image adds an HTTP request and bytes over the wire; a CSS gradient adds neither, which is part of why it helps Core Web Vitals scores rather than hurting them.