Tool
Gradient Generator
Create CSS linear gradient backgrounds.
Design Tools
What this tool does
Pick two colors and an angle to generate copy-ready CSS linear-gradient code.
How to use
- Enter start and end hex colors.
- Set gradient angle in degrees.
- Copy the CSS background property.
Examples
Blue to purple at 135°
Input: #2563EB → #7C3AED, 135deg
Output: linear-gradient(135deg, #2563EB, #7C3AED)
Diagonal gradient common in hero sections.
Common use cases
- Hero section backgrounds
- Button hover effects
- Design system gradient tokens
FAQ
Can I preview the gradient?
The output CSS can be pasted into your stylesheet for preview.
Does it support radial gradients?
This tool generates linear gradients only.
What angle values work?
0–360 degrees; 0 is bottom-to-top, 90 is left-to-right.
Related tools
Last reviewed: 2026-05-23