About CSS Gradient Generator
This CSS gradient generator builds a background from two or three colors and shows it in a large live preview. Choose a linear, radial or conic gradient, set the angle with the slider, pick your colors, and copy the finished line, such as background: linear-gradient(90deg, #0b0b0c 0%, #c6ff2e 100%);, into your stylesheet. The result updates as you move the controls.
Color stops are spaced evenly: with two colors they sit at 0% and 100%, and with three at 0%, 50% and 100%. The angle applies to linear gradients and sets the starting angle of conic ones; a radial gradient is a circle and ignores it. For a good result, pick colors with enough difference, and check text contrast on top. Everything runs in your browser.
How to use CSS Gradient Generator
- 01
Choose the gradient type and angle.
- 02
Pick two or three colors.
- 03
Copy the CSS code.
When to use it
- Create a hero section or banner background without opening an image editor.
- Style buttons and cards with a smooth two-color gradient.
- Make a conic gradient for a pie-style background or a color wheel.
- Test how brand colors blend before adding them to a design system.
- Copy a quick CSS background for a prototype, email template or landing page.
Frequently asked questions
How do I make a CSS gradient?
Choose a type, set the angle, pick two or three colors and copy the CSS from the output box. Paste it into a rule such as .hero { background: ...; } and it works in your page.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line at an angle. A radial gradient blends outward from a center point in a circle. A conic gradient sweeps colors around a center, like a color wheel.
Does the angle slider affect every gradient type?
It sets the direction of linear gradients (0 to 360 degrees) and the starting angle of conic gradients. Radial gradients here are circles from the center, so the angle has no effect on them.
Can I use three colors?
Yes. Tick Use a third color and the middle color is placed at 50%, with the others at 0% and 100%. The tool does not currently let you move individual stops or add more than three colors.
Which browsers support these gradients?
All modern browsers support linear, radial and conic gradients without vendor prefixes. Very old browsers may not support conic gradients, so keep a plain background color as a fallback if you need them.
Does the gradient generator upload my colors?
No. The gradient is built and displayed in your browser, and your colors are not sent to i40x or stored. Copy the CSS before leaving the page, because the settings reset when you reload.