About this tool: CSS Gradient Generator
Build linear or radial CSS gradients from two colors and an angle, with a live preview.
Choose two color stops, then select a linear direction or a radial blend. The preview displays the generated background immediately after running the tool. Copy the two CSS declarations into a selector: the first declaration provides a solid-color fallback.
How the calculation works
Worked example
| Mode | Linear |
| First color | #4f46e5 |
| Second color | #06b6d4 |
| Gradient angle, ° | 135 |
background: linear-gradient(135deg, #4f46e5, #06b6d4);
Questions and answers
What does this tool do?
Build linear or radial CSS gradients from two colors and an angle, with a live preview. Choose two color stops, then select a linear direction or a radial blend. The preview displays the generated background immediately after running the tool. Copy the two CSS declarations into a selector: the first declaration provides a solid-color fallback.
What affects precision and input format?
Colors use six-digit HEX. The angle applies only to linear gradients; radial mode has no angle.
Where are the calculations performed?
The calculation runs in your browser. You can use the tool without installing software.
Asted Cloud
Comments (0)
Share your thoughts — please be polite and stay on topic.
Log in to comment