What a CSS gradient is
A gradient is a smooth blend between two or more colors that the browser paints like an image, without downloading any file. In CSS it works anywhere an image is allowed, most often in the background property. With this generator you pick a type, set the angle and add color stops by hand; the preview updates instantly and hands you code ready to drop into your stylesheet.
How to use it
- Choose the gradient type: linear, radial or conic.
- For linear or conic, drag the angle control (0° to 360°) or type an exact value.
- Tune each color stop with its picker and its position in percent.
- Hit Add stop to bring in more colors (up to 6) or the cross to drop one.
- Press Random to generate a pleasant palette in one click.
- Copy the
background:line with a single tap.
Linear, radial and conic
All three types share the same list of stops, but they spread the color differently:
| Type | CSS function | How the color flows |
|---|---|---|
| Linear | linear-gradient() | In a straight line along an angle |
| Radial | radial-gradient() | In rings from the center outward |
| Conic | conic-gradient() | Sweeping around a point, like a clock |
Linear is the everyday workhorse: banners, buttons and page backgrounds. Radial mimics lights, spotlights and vignettes. Conic powers color wheels, pie charts and shine effects.
Color-stop syntax
Each stop is a color followed by an optional position. The general shape is linear-gradient(90deg, #8B7CF6 0%, #22D3EE 100%). The first value in a linear gradient is the angle (0deg points up, 90deg points right, 180deg points down). In a conic gradient the angle is written as from 45deg. A radial gradient takes no angle because it always radiates from the center.
Percentages decide where each color lands. If two stops share the same position you get a hard edge instead of a blend, which is exactly the trick for drawing stripes.
Worked example
Say we want a violet background fading into cyan on the diagonal. Set the type to linear, the angle to 135° (top-left corner to bottom-right) and two stops: #8B7CF6 at 0% and #22D3EE at 100%. The resulting code is:
background: linear-gradient(135deg, #8B7CF6 0%, #22D3EE 100%);
Want the violet to dominate? Move the second stop from 100% down to 70%: cyan starts earlier and the violet region grows. Add a third pink stop #EC4899 at 100% and you have a three-color blend without touching the rest.
Browser support
linear-gradient and radial-gradient have shipped in every modern browser for well over a decade, no prefixes needed. conic-gradient is newer but is already supported in current Chrome, Edge, Firefox and Safari. If you must serve very old browsers, declare a solid background-color first as a fallback: any browser that cannot parse the gradient will show that flat color instead.
Frequently asked questions
How do I make a diagonal gradient?
Use a linear gradient with an in-between angle. 45deg runs from the bottom-left corner to the top-right, and 135deg from the top-left to the bottom-right. Any value other than 0, 90, 180 or 270 degrees produces a diagonal.
Can I use more than two colors?
Yes. Add as many stops as you like up to six and space out their positions. For example, linear-gradient(90deg, red 0%, orange 50%, yellow 100%) builds a three-color blend. More stops mean finer control over where each hue mixes.
How do I set a full-screen gradient background?
Apply the gradient to the root element and give it full height: in your CSS, target body with min-height: 100vh and the background you copied here. Add background-attachment: fixed if you want the gradient to stay put while the page scrolls.
Do gradients weigh more than an image?
No. They are computed in the browser from a few lines of text, so they add no network requests and no image kilobytes. They also scale to any screen size without losing sharpness.