Gradient Generator
Build a CSS linear gradient by adjusting colour stops and direction. The preview helps compare backgrounds, while the readability of text placed over that background still needs a separate check.
- Runs in your browser
- Nothing is uploaded
- No signup; device limits apply
Loading the tool. If it does not appear, reload this page.
How to use this tool
Use two to eight stops with positions from zero to one hundred percent. The tool sorts stops by position; both their placement and the gradient angle determine how the transition appears.
Results and examples
At 90 degrees, red at 0% and blue at 100% create a left-to-right transition. Two different colours at the same position can form a hard edge instead of a smooth blend.
Limitations
- Colour management and interpolation can produce small differences between displays and browsers.
- Passing contrast at one stop does not establish readability across the whole gradient.
Fields
| Field | Guidance and constraints |
|---|---|
| Type | Check the unit and format displayed beside this field. |
| Angle (deg) | Check the unit and format displayed beside this field. |
| Color 1 | Check the unit and format displayed beside this field. |
| Position % | Check the unit and format displayed beside this field. |
| Color 2 | Check the unit and format displayed beside this field. |
| CSS | Check the unit and format displayed beside this field. |
Data handling
Processing stays in the current browser tab; the site does not upload tool input for the calculation itself.
Sources
Frequently asked questions
Which direction is a 90-degree gradient?
At 90 degrees, red at 0% and blue at 100% create a left-to-right transition. Two different colours at the same position can form a hard edge instead of a smooth blend.
Is overlaid text automatically accessible?
Colour management and interpolation can produce small differences between displays and browsers. Passing contrast at one stop does not establish readability across the whole gradient.
