How to use CSS Gradient Generator
- Choose linear, radial or conic, then set the angle for the types that use one.
- Pick the start and end colors and positions. For more colors, enter intermediate stops as #hex position%, one per line.
- Check the live preview, then copy the CSS rule into your stylesheet.
Example: CSS Gradient Generator
Build a linear gradient between two greens.
Options
- Gradient type
- Linear runs in one direction from the angle. Radial spreads from the center in a circle. Conic sweeps around the center and starts at the angle you set.
- Color stops
- The first two controls set the endpoints. Extra color stops add up to six intermediate colors with their own positions, in increasing order.
- Background color fallback
- The rule sets background-color to the first color before the gradient, so a browser that cannot draw gradients still shows a solid color.
Supported inputs and limits
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
Angles and the painted box
A linear angle is measured clockwise from the bottom of the box: 0 degrees points up, 90 degrees points right and 180 degrees points down. The angle applies to the element the gradient paints, so the same rule looks different on a wide button and a tall panel. Copy the rule and check it on the real element at the size it will appear.
Questions about CSS Gradient Generator
Can I use the generated CSS in any browser?
Linear and radial gradients work in current browsers. Conic gradients also work in current browsers, but older versions ignore them, which is why the rule sets a solid background-color first.
Why does the preview look different from my page?
The preview uses a fixed box on a plain background. Your element may have a different size, border radius or background behind it, and those change how the same gradient reads.
How do I add more than two colors?
Keep the endpoint colors in their controls. Add intermediate colors in Extra color stops, such as #ff0000 50%. Use one line per stop, with positions strictly between the endpoints and increasing from line to line. The total limit is eight colors.
Does the page change my site or store the colors?
No. The gradient is built in this browser, and nothing is saved or sent anywhere.