CSS Gradient Generator

Create beautiful CSS gradients with live preview. Supports linear and radial gradients.

Direction / Angle

Color Stops

CSS Code

Popular CSS Gradient Combinations

Click any swatch to apply as a starting point.

Linear vs Radial Gradients

CSS gradients are drawn by the browser, so they stay razor-sharp at any size and add zero image weight to your page. A linear-gradient blends colors along a straight line whose direction you set in degrees (90deg points right, 180deg points down). A radial-gradient blends outward from a center point as a circle or ellipse. Both take two or more color stops, and you control where each color sits using percentages.

Reading the Syntax

A simple rule is background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);. The first value is the angle, and each pair after it is a color and its position. Add more stops for multi-color blends, and use transparent or rgba() stops to fade a gradient into the page. This generator writes the full, copy-ready rule for you as you adjust the colors and angle.

Tips and Browser Support

Gradients work in every modern browser without vendor prefixes. For accessibility, keep enough contrast between any text and the lightest part of the gradient — you can verify it with the contrast checker. Subtle two-color blends usually look more professional than high-contrast rainbows.

Frequently Asked Questions

What types of CSS gradients are there?

CSS supports linear-gradient (straight lines), radial-gradient (circular/elliptical), and conic-gradient (sweeping around a point). Each can have multiple color stops.

How do I use a CSS gradient as a background?

Use background: linear-gradient(direction, color1, color2); in your CSS. Example: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

What is the difference between a linear and radial gradient?

A linear gradient transitions colors along a straight line. A radial gradient transitions from a center point outward in a circular or elliptical shape.