CSS Gradient Generator
Build linear or radial gradients visually and copy the CSS. Free to use, no signup required for occasional use.
Copyable CSS will appear here…What is the CSS Gradient Generator?
The CSS Gradient Generator is a free online tool that lets you visually build linear and radial gradients and instantly get the matching CSS code to use in your project. Writing gradient syntax by hand means remembering the exact order of arguments, angle units, and color-stop percentages, and small mistakes can produce a gradient that looks nothing like what you intended. This tool removes that friction: pick your gradient type (linear or radial), choose your colors with a color picker, and for linear gradients adjust the angle with a slider, all while seeing a live preview update in real time above the controls. Once the gradient looks right, the tool outputs clean, ready-to-paste CSS using the standard `linear-gradient()` or `radial-gradient()` syntax that works across all modern browsers. This is useful for front-end developers building hero sections, buttons, or background treatments, as well as designers who want to prototype a gradient visually before handing off exact values to a developer, without needing to open a full design tool just to pick two colors and an angle.
How to use it
Choose a gradient type — Linear or Radial — using the toggle. Pick your first and second colors using the color swatches; the live preview above updates immediately so you can see the result as you adjust. For linear gradients, drag the angle slider to control the direction the gradient flows, from a straight horizontal or vertical line to any angle in between. Once you're happy with how it looks, click 'Generate CSS' to produce the exact CSS `background` declaration for your gradient. Copy the code using the copy button and paste it directly into your stylesheet, a component's inline styles, or a CSS-in-JS template. If you want to try a different look, simply change a color or the angle and generate again — there's no limit to how many variations you can preview before picking a final one.
Frequently asked questions
What's the difference between linear and radial gradients?
A linear gradient transitions colors in a straight line at a chosen angle, while a radial gradient transitions colors outward from a center point in a circular pattern.
Does the tool show a live preview before I generate the CSS?
Yes, the gradient preview updates in real time as you change colors, type, or angle, so you can fine-tune it visually before copying the code.
Is the generated CSS compatible with all modern browsers?
Yes, the tool outputs standard `linear-gradient()` and `radial-gradient()` CSS syntax, which is supported by all current major browsers.
Can I use more than two colors in a gradient?
The tool is built around a clean two-color gradient for quick, common use cases. For more advanced multi-stop gradients, you can manually extend the generated CSS.