Practical example
- Input
Type: Linear First color: #336699 Second color: #ffffff Angle: 90- Result
linear-gradient(90deg, #336699 0%, #FFFFFF 100%)
CSS gradient generator
Create linear and radial CSS gradients with two colors, a custom angle and a preview. Copy the code or download a CSS file.
Result
Enter the data and run the tool.
We count which tools are used most, without including entered values or file contents in the statistics. Privacy
How to use the tool
- Set First color / Second color / Type / Angle.
- Select “Process”, review the result and use the buttons to copy or download it.
Method and limits
Choose two HEX colors, a type and an angle from 0 to 360 degrees. The angle applies only to linear gradients.
Example
#336699 + #CC6699 → linear-gradient(90deg, #336699 0%, #CC6699 100%)