CSS Gradient Generator
Build linear or radial gradients with live preview and copy-ready CSS.
How to Use the CSS Gradient Generator
Pick a type (linear / radial), an angle and two colors, or choose an example chip. The preview and the background CSS update together, so copy it into your element's CSS. The angle field hides automatically for radial.
Use the generated CSS for hero backgrounds, subtle panels, buttons, badges and placeholder graphics. The output is plain CSS, so it works in static HTML, React, Vue, Web Components and most design systems.
What each option does
- Type: linear changes color along a straight line; radial spreads from the center outward.
- Angle (deg): linear only — 0deg bottom→top, 90deg left→right, 180deg top→bottom, 135deg top-left→bottom-right.
- Color 1 & 2: the start and end colors, set with the color pickers.
- Color stops (advanced): add colors with commas and a % after each to control where the transition sits.
Examples
- brand→cyan (diagonal) →
background: linear-gradient(135deg, #ea6379, #7fcfd6) - Horizontal (angle 90deg) →
background: linear-gradient(90deg, #ea6379, #7fcfd6) - Vertical (angle 180deg) →
background: linear-gradient(180deg, #f3cf76, #84cfa0) - Radial (from center) →
background: radial-gradient(circle, #ffffff, #1a1a2e)
Design Notes
- Use a low-contrast gradient behind text, or place text in a separate solid area for readability.
- Keep brand gradients consistent by reusing the copied CSS value across components.
- For multiple color stops, copy the output and add extra colors manually with commas.
FAQ
Is my data sent to a server?
No. Everything runs in your browser; nothing is transmitted or stored externally.
Linear vs radial?
Linear shifts along an angle; radial spreads from a center point outward. Example: linear-gradient(135deg, #ea6379, #7fcfd6) / radial-gradient(circle, #ffffff, #1a1a2e).
How do I pick the angle (deg)?
For linear-gradient, 0deg goes bottom to top, 90deg left to right, and 180deg top to bottom. For a diagonal flow, 135deg (top-left to bottom-right) is a common choice.
Where does the output CSS go?
The output is a background property. Paste it into your element's CSS as background: linear-gradient(...); and it becomes the background. For three or more colors, add them to the output with commas, e.g. linear-gradient(135deg, #ea6379, #f3cf76, #7fcfd6).
Can I use more than two colors or set color stops?
This tool builds a two-color background, but you can add more colors by extending the output with commas. Put a % after each color to set where the transition sits (the color stop). Example: linear-gradient(135deg, #ea6379 0%, #f3cf76 50%, #7fcfd6 100%).
Can I use gradients beyond backgrounds?
Yes. For gradient text, add background-clip: text; color: transparent; to the generated background declaration. For a gradient border, extract only the gradient function and use it with border plus border-image: linear-gradient(...) 1;. You cannot paste the complete background: declaration into border-image unchanged.
Why does the middle of my gradient look washed out or grey?
The two colours are interpolated mechanically, so a pair with distant hues loses saturation in the middle and shows a grey band. Either add a saturated middle colour with a comma to make it a three-stop gradient, or specify the interpolation space as in linear-gradient(in oklab, ...). The latter is a newer syntax, so declare a plain background-color first as a fallback if you support older engines.
Can I make the radial gradient elliptical or move its centre?
The output is fixed to a centred circle. In the copied CSS, change circle to ellipse for a shape that follows the element's proportions, or write circle at 50% 0% to move the centre. Use closest-side or farthest-corner to control how far the gradient reaches.