Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
CSS gradients blend two or more colors smoothly across an element's background, and getting the syntax exactly right — especially the angle for linear gradients — is easy to get slightly wrong by hand.
This generator builds a linear or radial CSS gradient declaration from your chosen colors and angle.
How it works
Choose linear or radial, set the angle (for linear gradients), and enter two or three colors. The generator builds the appropriate <code>linear-gradient()</code> or <code>radial-gradient()</code> CSS function with your colors in order.
- Enter gradient type.
- Enter angle (degrees, linear only).
- Enter first color.
- Enter second color.
- Enter third color (optional).
- Click Calculate to see your results.
Examples
90° linear gradient
A 90° linear gradient from #6366F1 to #EC4899 produces background: linear-gradient(90deg, #6366F1, #EC4899);, transitioning left to right.
Who should use it
- Creating a background gradient for a website hero section or button.
- Quickly prototyping a gradient without manually writing CSS syntax.
Industry applications
- Web design and front-end development
- UI/UX design
Advantages
- Supports both linear and radial gradient types.
- Handles 2 or 3 color stops with correct CSS syntax.
Limitations
- Doesn't support custom color stop positions (like "20%, 80%") — colors are evenly distributed by default.
Common mistakes to avoid
- Forgetting that 0deg points up, not right, in a linear-gradient() — a common source of "the gradient is going the wrong way" confusion.
- Using linear gradient syntax when a radial effect was actually intended, or vice versa.
Best practices
- For a subtle effect, use colors that are relatively close to each other; for a bold, high-contrast effect, use colors from opposite ends of the color wheel.
Tips
- Gradients using colors that are adjacent on the color wheel (like blue to purple) tend to look smoother and more natural than gradients between complementary (opposite) colors, which can look more jarring.