CSS Gradient Generator

Create a CSS gradient and copy the code. Choose linear, radial or conic, set the angle, add up to six colors, and see the result in the preview as you go. Start from a preset or press Random gradient for inspiration.

All Free ToolsColor ConverterColor Palette GeneratorHTML Viewer

What Is a CSS Gradient?

A CSS gradient is a smooth change from one color to another that the browser draws for you. You can use it as the background of a page, a button, a banner or a card, without needing an image file. Gradients load instantly, stay sharp on every screen size and are easy to change later.

How to Make a Gradient

1. Pick a type: linear for a straight blend, radial for a blend that spreads from the center, or conic for a blend that goes around a point.
2. Choose colors with the color boxes or type HEX codes. Set each position from 0 to 100 percent, and add more colors if you like.
3. Move the angle slider for linear and conic gradients, then press Copy CSS and paste the code into your stylesheet.

Linear, Radial and Conic

Linear

Colors change along a straight line. An angle of 90 degrees goes from left to right, 180 from top to bottom, and 135 from the top left corner to the bottom right corner.

Radial

Colors spread outward from the center in a circle or an ellipse. It is good for glows, spotlights and button highlights.

Conic

Colors sweep around the center like the hands of a clock. It is used for color wheels, pie charts and decorative backgrounds.

Tips for Better Gradients

• Use colors that are close on the color wheel for a calm look, and contrasting colors for a bold look.
• Check that text on top of the gradient is still easy to read in its lightest and darkest parts. The color converter shows contrast ratios.
• Two or three colors usually look better than five or six.
• The code includes a plain background color first, so old browsers that cannot draw gradients still show a color.

Limits to Know About

• The tool creates the three standard CSS gradient types with colors and positions. It does not create repeating gradients or transparent colors.
• You can use up to six colors.
• Gradient colors can look slightly different on different screens.

Frequently Asked Questions

How do I use the CSS code?

Copy it and paste it into the style of the element you want, for example inside a rule for the body, a div or a button.

Is this gradient generator free?

Yes. It is free to use, with no sign-up.

Can I use the gradient on a button or text?

Yes. Use it as a button background. For text you also need background-clip: text, which is a separate CSS rule.

What does the angle mean?

It sets the direction. 0 degrees points up, 90 degrees points right, 180 degrees points down and 270 degrees points left.

Can I make a gradient with transparent colors?

This tool uses solid colors. You can edit the copied code and use rgba() values if you need transparency.

More Free Tools

Try the color converter, the color palette generator, the HTML viewer or the image converter, or browse all free online tools.