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.
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).