CSS Gradient Generator
Build linear and radial CSS gradients with live preview, adjustable angle, colors and stops. Copy the CSS instantly.
Pure browser JavaScript — generates CSS gradients locally.
How to use this tool
- Choose linear or radial.
- Pick two colors and adjust their stop positions (and angle for linear).
- Copy the generated CSS background rule.
Build linear and radial CSS gradients with live preview, adjustable angle, colors and stops. Copy the CSS instantly.
How it works
The CSS Gradient Generator lets you visually design linear and radial gradients and instantly copy the CSS background property declaration, ready to paste into your stylesheet.
For linear gradients, set the angle to control the direction (0deg flows top-to-bottom, 90deg flows left-to-right). Add multiple color stops and drag them to position them along the gradient bar. For radial gradients, the gradient radiates outward from a center point, and you can choose an elliptical or circular shape.
The live preview updates as you adjust sliders and colors so you see exactly what the output will look like before copying. The generated CSS uses the standard linear-gradient() or radial-gradient() syntax without vendor prefixes, which is supported by all modern browsers.
Use gradients for button backgrounds, hero sections, card accents, and text fills. They eliminate the need for image files, reducing page load time.
Worked example
Create a sunset-style hero background
- Select Linear gradient type.
- Set angle to 135deg (diagonal, top-left to bottom-right).
- Add a deep orange stop at 0%, a pink stop at 50%, and a purple stop at 100%.
- Preview the result in the live preview area.
- Click Copy CSS and paste it into your hero section's CSS rule.
A diagonal sunset gradient background requiring no image files.
Common mistakes to avoid
- Setting only two color stops with no intermediate stops, producing a flat transition — add a midpoint stop to give the gradient more character.
- Using very similar colors for all stops, which produces a gradient that looks like a flat solid color on most screens.
- Forgetting that background shorthand overwrites other background properties like background-size or background-position if used carelessly.
Key terms
- Color stop
- A specific color at a specific position along a gradient, defined as a color value and a percentage or length.
- Linear gradient
- A gradient that transitions between colors along a straight line at a specified angle.
- Radial gradient
- A gradient that radiates outward from a center point, transitioning through color stops in circular or elliptical rings.
Frequently asked questions
- Can I use this in any project?
- Yes — the output is a standard CSS background property that works in every modern browser.