CSS Gradient Helper — Copy CSS, Free | How to use and interpret results
Generate a CSS background declaration for a two-colour linear or radial gradient. It is a quick way to test a pair of colours and direction before editing a more complex design.
- Runs in your browser
- Nothing is uploaded
- No signup; device limits apply
Numbers stay on your device. Nothing is sent to a server.
How to use this tool
Supply start and end colours in CSS syntax and choose linear or radial. The angle controls the linear mode, so it does not give the same directional effect in radial mode.
Results and examples
A 90-degree linear red-to-blue gradient moves from left to right. Copy the background declaration and check readability with the actual text placed over it.
Worked example
A 90-degree linear red-to-blue gradient moves from left to right. Copy the background declaration and check readability with the actual text placed over it.
Limitations
- Additional stops and repeating gradients are not generated.
- Text contrast and browser colour interpolation differences are not audited.
Fields
| Field | Guidance and constraints |
|---|---|
| Type | Linear / Radial |
| Angle (linear, deg) | Accepted range: 0–360 · Input step: 1 |
| Start colour | Check the unit and format displayed beside this field. |
| End colour | 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 linear gradient?
A 90-degree linear red-to-blue gradient moves from left to right. Copy the background declaration and check readability with the actual text placed over it.
Can I add a third stop?
Additional stops and repeating gradients are not generated. Text contrast and browser colour interpolation differences are not audited.
Related tools
You do not need to start over. Continue with the tool that fits your next step.
