CSS Gradient Generator
Build a CSS background from two colors or add a third stop for a more controlled transition. Preview the selected geometry, adjust positions and export the declaration without creating a bitmap.
Browser-based · No account required · Copy and export
Workspace
PixelOkay · Developer toolsHow to use CSS Gradient Generator
- Choose linear, radial or conic geometry. Set the angle where that geometry uses one.
- Pick the endpoint colors and positions. Optionally enable a middle color and position it between the endpoints.
- Update the preview, reverse the endpoint colors if useful, then copy or download the CSS declaration.
When to use this tool
Build a background or overlay and compare color-stop positions visually. Check text contrast over the entire gradient rather than only at its endpoints.
Color stops define the transition
A stop pairs a color with a location. Two stops can create a smooth transition or a sharp boundary when placed together. Linear gradients follow a direction; radial gradients expand outward; conic gradients turn around a center. Positions in this tool are percentages, including conic positions expressed as a share of one full turn.
Worked example
background: linear-gradient(135deg, #229b7e 0%, #2795d2 100%);
Optional middle stop:
#ffffff 50%Limits and output checks
Positions must be within 0–100 and in ascending order, including an enabled middle stop. This tool exports CSS, not an image file. Gradient text contrast can vary across the background, so test the actual foreground and region where it appears.
Reference: CSS gradients.
Frequently asked questions
Can I add a third color?
Enable the middle color, choose its color and place its stop between the two endpoint positions.
Does reverse also change stop positions?
It swaps the endpoint colors while retaining their configured positions. The optional middle stop remains unchanged.
Why is an invalid stop rejected instead of corrected?
Silent reordering would change your intended background. The tool asks you to choose valid ordered positions.
A practical workflow
Choose colors and stop positions for a section background, then copy the CSS into the component where it will be displayed.
Read the scope alongside the result
The output is CSS rather than a bitmap. Contrast varies across a gradient; a preview does not establish accessible foreground contrast in every placement.