How to use the css gradient generator
- Pick a type: linear, radial or conic. Or start from one of the presets.
- Set the angle for linear and conic gradients, or the shape and center for radial and conic ones.
- Edit the color stops. Each has a color and a position from 0 to 100 percent. Add colors up to eight, remove them or reverse the order.
- Check the preview and press Copy CSS to use the code in your stylesheet.
The three gradient types
A linear gradient blends colors along a straight line at an angle, where 0 degrees points up and 90 degrees points right. A radial gradient blends outward from a center point in a circle or ellipse. A conic gradient sweeps colors around a center like a color wheel or a pie chart, starting at the angle you set.
Color stops
A stop pins a color to a position along the gradient. The browser blends between neighbors. Two stops at the same position make a hard edge, which is how stripes and pie slices are made. Stops are sorted by position in the code, so you can enter them in any order. Colors are hex codes such as #1a2b3c, and three digit codes like #abc are expanded.
Using the CSS
Paste the lines into a CSS rule, such as one for a hero section. The first line is a plain background color that old browsers use if they do not understand gradients. You can turn it off if you do not need it. Gradients can sit behind text, so check the contrast of the text on top with the color contrast checker, and pick exact colors with the color picker. To lay out the elements on top, the flexbox generator helps.
Assumptions and limits
- Colors are entered as hex codes, with three or six digits.
- The output uses standard CSS gradient syntax that current browsers support. Conic gradients need a reasonably recent browser.
- The preview is drawn by your browser, so it shows exactly what the code does there.
- Everything runs in your browser. No colors or settings are uploaded.
Frequently asked questions
What does the angle in a linear gradient mean?
It is the direction of the color line in degrees. 0 degrees goes from bottom to top, 90 degrees goes from left to right, 180 degrees goes from top to bottom and 270 degrees goes from right to left.
How do I make a gradient with a hard edge?
Give two neighboring stops the same position, with different colors. The color changes abruptly at that point instead of blending.
How many colors can I use?
Up to eight stops in this tool, which is enough for almost every design. CSS itself allows more.
Why is there a plain background line first?
It is a fallback for browsers that do not support gradients. Browsers that do will use the gradient line after it. Untick the box to leave it out.