CSS Gradient Generator: Linear and Radial Gradients Explained

A CSS gradient is an image the browser draws for you from two or more colors, so it needs no file, loads instantly and scales to any size. You use it anywhere CSS accepts an image, most often as a background. The two basic kinds are linear, which blends along a line, and radial, which blends outward from a point.

Linear gradients and the angle

A linear gradient blends from one color to the next along a straight line. The line's direction is set by an angle in degrees:

The code looks like background: linear-gradient(135deg, #7c3aed, #06b6d4);. Diagonal angles such as 135deg tend to look more natural than straight horizontal or vertical ones.

Radial gradients

A radial gradient starts from a center point and spreads outward. With circle the shape is round: background: radial-gradient(circle, #7c3aed, #06b6d4);. It suits spotlights, glows behind a hero image and soft button highlights.

Choosing colors that blend well

• Pick neighbors on the color wheel. Blue to purple or orange to pink blend smoothly. Opposites such as red to green can pass through a muddy gray in the middle.
• Keep similar brightness. A very dark color next to a very light one produces a hard-looking band.
• Check text contrast. If text sits on the gradient, test it against both the lightest and darkest parts, not just the middle. Our Color Contrast Checker does this for any pair.

How to use our generator

1. Open the Gradient Generator.
2. Choose Linear or Radial.
3. Pick the two colors, or start from one of the presets.
4. For a linear gradient, drag the angle slider from 0 to 360 degrees and watch the preview update.
5. Copy the CSS and paste it into your stylesheet.

Need exact color values first? The Color Picker and Color Palette Generator give you hex, RGB and HSL codes to start from.

Practical tips

• Always set a plain background-color as a fallback before the gradient line.
• Gradients are drawn by the browser, so they cost no extra download and stay sharp on high-resolution screens.
• Banding (visible stripes) can appear on very subtle, large gradients. Slightly increasing the difference between the two colors usually hides it.