Add your input
Two colors and a gradient angle.
Design bench
CSS gradient generator
Preview the result and copy production-ready CSS.
Privacy built inYour work stays with you
background: linear-gradient(135deg, #06B6D4, #8B5CF6);Your work stays private in your browser while you use this tool.
What does css gradient generator do?
Create a two-color CSS linear or circular radial gradient, preview it, swap the endpoint colors, and copy a complete background declaration.
- Input
- Two colors and a gradient angle.
- Result
- A CSS linear-gradient declaration.
- Price
- Free
- Account
- Not required
How to use css gradient generator
Choose your settings
Preview the result and copy production-ready CSS.
Save or copy
A CSS linear-gradient declaration.
A practical tip
A small hue shift and uneven stop positions often feel more natural than a perfectly even blend.
When to use css gradient generator
Build a hero or card background from two known design-token colors.
Test how reversing gradient endpoints changes visual direction.
Choose a linear angle interactively before pasting the declaration into CSS.
Worked example
A concrete css gradient generator example
- Input
- Start #06B6D4 and end #8B5CF6
- Settings
- Linear gradient at 135°
- Result
- background: linear-gradient(135deg, #06B6D4, #8B5CF6);
What to expect
How it works
For a linear gradient, the page serializes the selected angle and two HEX color stops into linear-gradient(). Radial mode emits radial-gradient(circle, start, end) and intentionally omits the angle because it does not apply to that form.
Know before using
Limits and edge cases
- It supports exactly two colors with implicit start and end positions; there are no extra stops, hard transitions, interpolation hints, or custom radial size and position controls.
- The preview reflects the current browser's CSS rendering and does not test banding, print output, older-browser prefixes, or contrast over every point in the gradient.
Standards and sources
Common questions
CSS gradient generator FAQ
Is css gradient generator free to use?
Yes. CSS gradient generator is free to use.
Does css gradient generator keep my work private?
Yes. Your work stays private while you use the tool — nothing you enter is uploaded.
Why does the angle control disappear for a radial gradient?
The generated radial form expands from a circle rather than along a directional line, so this implementation has no angle to serialize.
Can I set one color to stop before 100%?
Not in this version. Both stops use the browser's default endpoint placement. Add percentages manually after copying the CSS if you need custom positions.