A diagonal banner
The Coastal preset places deep blue at 0% and aqua at 100% along a 135-degree linear gradient. Change the angle to move the transition across the banner.
Gradient settings
Color stop 1
Color stop 2
Preview & CSS
Gradient preview
Positions run from 0% to 100% in ascending order. Place stops at the same position for a sharp transition.
Inputs and previews are processed locally in your browser. No external color or design API is used.
How to use the CSS Gradient Generator
- 01
Choose linear, radial, or conic and load a preset if useful.
- 02
Set each stop color and its percentage position. Keep positions in ascending order.
- 03
Adjust the angle for linear or conic gradients; use equal positions for hard edges.
- 04
Inspect the gradient preview and copy or download the generated background-image rule.
Examples
A sharp split
Set the first stop to 50% and the second stop to 50%. The shared position creates a hard division rather than a gradual blend.
Select the geometry
Linear gradients move along a line; radial gradients spread from a center; conic gradients turn around a center. This tool uses a centered ellipse for radial output and a centered rotation for conic output. A conic first/last color mismatch can leave a visible seam where the rotation closes.
Stop placement and transparency
Percentages describe positions along the selected gradient geometry. The tool requires nondecreasing positions, with duplicate positions allowed. Transparent colors blend with the surface behind the gradient, so a gradient exported onto a different canvas can appear different from the preview.
Common questions
Is the downloaded file an image?
No. Download creates a CSS file containing a background-image declaration. The browser renders the gradient at the element size.
Can I add more than two colors?
Yes. Add up to six stops, edit their colors and positions, or remove stops while keeping at least two.
Why does my gradient look different on a tall element?
Gradient geometry depends on the painted box. A radial ellipse and a diagonal linear gradient adapt to its proportions. Check the CSS in the destination element.