To create a CSS gradient, pick two colors and an angle in the Gradient Generator, and it outputs the linear-gradient code ready to paste into your stylesheet.
How to use the Gradient Generator
- Choose the start and end colors.
- Set the angle.
- Preview the gradient.
- Copy the CSS.
Worked example
linear-gradient(90deg, #3B82F6, #6366F1) blends from blue on the left to indigo on the right.
Tips and common mistakes
- An angle of 90deg runs left to right and 180deg runs top to bottom.
- Check text contrast over the gradient.
- Subtle gradients often look more polished than strong ones.
Frequently asked questions
Where do I paste the CSS?
Use it as a background or background-image value.
Can I use more than two colors?
This tool creates a two-color gradient.
Is it private?
Yes.