What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors defined in CSS, rendered entirely by the browser with no image files needed. Linear gradients go in a straight line; radial gradients radiate outward from a center point.

What is the difference between background and background-image?

background is a shorthand property that can include color, image, position, and more. background-image targets only the image layer. Both values are provided so you can use whichever fits your CSS.

How do I add more color stops?

Click 'Add Stop' to add a new color stop. Each stop has a color picker and a position slider (0–100%). You can remove any stop with the × button.

Can I use transparency in gradients?

Yes. Use the color picker to choose a color with full opacity, then the browser will render it. For RGBA transparency, you can manually edit the CSS output to replace hex values with rgba() equivalents.

design Free No signup

CSS Gradient Generator

Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.

Loading tool…

About this tool

Create beautiful CSS gradients without writing code. Add color stops, drag them to set positions, pick gradient type (linear or radial), and adjust the angle. The live preview updates instantly, and you can copy the full background CSS property with one click.

How to use

1 Select 'Linear' or 'Radial' gradient type.
2 Add color stops and pick colors and positions for each.
3 For linear gradients, adjust the angle with the slider.
4 Copy the CSS output and paste it into your stylesheet.

Frequently Asked Questions

Related tools

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL, HSV, and CMYK — with live preview.

Color Palette Generator

Generate harmonious color palettes — complementary, triadic, analogous, and split-complementary — from any base color.

Box Shadow Generator

Build CSS box-shadow values visually with live preview — supports multiple layers.