Tool 025 / design / free / runs locally
CSS Gradient Generator
Add color stops, set an angle or shape, and preview a linear or radial CSS gradient live as you adjust it. Copy the exact `background` CSS declaration when it looks right. Everything renders in your browser using standard CSS, so there's nothing to upload and no build step to preview it.
background: linear-gradient(135deg, #1c46c8 0%, #ff6b6b 100%);
How it works
This builds a CSS gradient visually and gives you the exact one-line background declaration to paste into a stylesheet. You choose linear or radial, set an angle, and place between two and six colour stops, each with its own hex colour and a percentage position along the gradient.
The preview at the top is not a picture of a gradient. It is a real div with the generated value applied as its background, so what you see is precisely what the browser will paint on your own element. Stops are sorted by position before the CSS is written, which means you can drag a stop past its neighbour without producing an invalid declaration.
Linear mode emits an angle in degrees, where 0deg points up and the angle increases clockwise, so 90deg runs left to right and the 135deg default runs from top left to bottom right. Radial mode emits a circle gradient centred on the element.
How to use it
- Choose Linear or Radial.
- For a linear gradient, drag the angle slider between 0 and 360 degrees.
- Set the colour and position percentage of each stop, and use Add stop for up to six.
- Watch the live preview until it matches what you want.
- Click Copy to take the background declaration into your CSS.
Worked examples
Input: Linear, 135 degrees, #1c46c8 at 0 percent and #ff6b6b at 100 percent
Output: background: linear-gradient(135deg, #1c46c8 0%, #ff6b6b 100%);
The default two-stop diagonal blend from top left to bottom right.
Input: A third stop, #ffd166, added at 50 percent
Output: background: linear-gradient(135deg, #1c46c8 0%, #ffd166 50%, #ff6b6b 100%);
Stops are always written in position order regardless of the order you added them.
Edge cases and limits
- Two to six stops. You cannot drop below two or add a seventh.
- Colours are opaque hex values from the colour picker. There is no alpha channel, so semi-transparent stops must be written by hand as rgba values.
- Radial gradients are always circle with the default centre. Ellipse, explicit sizes such as farthest-corner, and at-position syntax are not exposed.
- Conic gradients, repeating gradients, and multiple stacked gradient layers are out of scope.
- No vendor prefixes are emitted. None are needed for any browser in current support, but a very old target would need them added.
- Colour interpolation happens in the browser's default sRGB space, so a blend between two saturated hues can pass through a duller middle.
Common mistakes
- Assuming 0deg means left to right. In CSS a linear gradient angle points toward the end colour, and 0deg points up, so left to right is 90deg.
- Blending two complementary colours directly and getting a muddy grey band in the middle. Add an intermediate stop to steer the path.
- Pasting the value without the background property when a shorthand background declaration elsewhere in the rule later overrides it.
- Relying on a gradient for text contrast. Check the darkest and lightest points against your text colour, not just the average.
Frequently asked questions
What's the difference from the Color Palette Generator?+
The Color Palette Generator suggests complementary, triadic, and analogous hex colors from a single base color. This tool takes colors you choose (any number of stops) and builds the actual CSS gradient syntax, linear-gradient() or radial-gradient(), with a live preview of the blended result, which the palette tool doesn't produce.
Can I control where each color stop sits in the gradient?+
Yes. Each stop has its own position percentage in addition to its color, so you can bunch colors together or spread them evenly. Drag the position slider for a stop to see the preview and generated CSS update immediately.
Does the generated CSS work in all modern browsers?+
Yes. Both linear-gradient() and radial-gradient() with percentage color stops have been supported in all major browsers for years, so the copied CSS can be pasted directly into a stylesheet without vendor prefixes.
How do I make a CSS gradient go from left to right?+
Set the angle to 90deg. CSS gradient angles point toward the final colour and start from up, so 0deg is bottom to top, 90deg is left to right, 180deg is top to bottom, and 270deg is right to left.
Can I use this gradient as a text colour?+
Yes, with two extra lines. Apply the generated background to the element, then add background-clip: text and color: transparent. The gradient then paints the glyphs instead of the box.
Related tools
More Design tools that run entirely in your browser.