CSS gradient generator
Create a two-color linear gradient with a live preview.
01 / Your input
02 / Your result
Your result will appear here.
How to use this tool
- Enter your own values, or select Load example to restore the demonstration inputs.
- Review Start color, End color, Angle (degrees) before selecting Run tool.
- Inspect the result, then copy it or download the generated file. Changing inputs clears the previous result.
Processing happens in this browser. Inputs are not uploaded or saved by the tool. Reset clears the result and restores the default settings.
Example and expected result
The example produces linear-gradient(135deg, #536ed8, #ff756e).
Limits and interpretation
Preview shows CSS interpolation in this browser. Check text contrast against all parts of the gradient.