CSS Gradient Generator
Generate CSS linear-gradient code from two colors and an angle.
About the CSS Gradient Generator
Generates ready-to-paste CSS for a linear gradient between two colors at a chosen angle, with a live preview.
How to use
Enter two HEX colors and an angle in degrees, then click Generate.
Worked example
#6366f1 to #ec4899 at 135° → a vibrant indigo-to-pink gradient.
How to use this calculator
- Choose your first color and second color.
- Enter the angle for the gradient direction.
- Generate the CSS code and copy it into your stylesheet.
The formula explained
$$ \text{gradient} = \text{linear-gradient}(\theta, c_1, c_2) $$
- \(\text{gradient}\) = the CSS gradient string the tool generates
- \(\text{theta}\) = the angle of the gradient direction in degrees
- \(c1\) = the first color stop
- \(c2\) = the second color stop
Step by step method
- Select two colors that you want to blend in the gradient.
- Set the angle so the gradient flows in the direction you want.
- Use the tool to create the linear-gradient CSS value.
- Paste the generated code into your CSS where the background is needed.
Worked example
Suppose you want a simple background that fades from blue to green at a 45 degree angle.
- Pick the colors blue and green, then set the angle to \(45^\circ\).
- The tool formats those inputs as a CSS linear gradient with the chosen direction and color stops.
- Copy the generated CSS into your background style.
Answer. background: linear-gradient(45deg, blue, green);
Tips and common mistakes
- Use hex codes if you want exact brand colors or consistent shades.
- Check the angle carefully, since a small change can make the gradient flow in a different direction.
- If the gradient looks too harsh, choose colors that are closer in tone.
- Remember that this tool generates the CSS value, so you still need to place it in a valid CSS property.
Frequently asked questions
What does the angle do?+
0° points up, 90° points right; it sets the gradient's direction.
Can I add more colors?+
This generates a two-stop gradient; add more stops manually in the CSS.
More Tech Tools Tools
Explore related calculators in this category
CSS Unit Converter (px / rem / em)
Convert between px, rem, em and pt using a root font size.
Radial Gradient Generator
Generate CSS radial-gradient code with a live preview.
AI API Cost Calculator
Estimate LLM API cost from input/output tokens and per-token prices.
Accessible Color Pair Finder
Check if a text/background pair meets WCAG and suggest a fix. Free tool with instant calculations, the underlying formula, and an easy-to-follow example.
You Might Also Like
Popular tools from other categories
CSS Minifier
Minify CSS by removing comments, whitespace and the last semicolons. Shrink stylesheets instantly.
CSS Property Reference
Searchable reference of common CSS properties and what they do.
.htaccess Generator
Generate common .htaccess rules, force HTTPS, www redirect, and caching, with checkboxes.
1031 Exchange Calculator - Free Online
Free Calculate tax deferral in a 1031 exchange. Step-by-step solutions and formulas included. Fast, accurate, and free, with formula and example.
Can't Find the Right Calculator?
Try our AI Math Solver, type any problem in plain English and get instant step-by-step solutions.