CSS Gradient Generator Guide: Linear, Radial & Conic Gradients

Linear Gradients

The most common gradient type. Colors transition along a straight line defined by an angle or direction keyword. The default direction is top to bottom.

background: linear-gradient(to right, #667eea, #764ba2);

Direction options: to top, to right, to bottom left, or any angle (45deg, 135deg). At 0deg the gradient goes upward, 90deg goes right, 180deg goes down. Add color stops at specific percentages to control where each color appears: linear-gradient(90deg, red 0%, yellow 25%, green 100%).

Radial Gradients

Radial gradients expand outward from a center point. By default, they form an ellipse sized to the farthest corner. You can specify shape, size, and position.

background: radial-gradient(circle at 30% 50%, #ff6b6b, #4ecdc4);

Shape: circle or ellipse. Size: closest-side, farthest-side, closest-corner, farthest-corner, or explicit dimensions. Position: any combination of percentages or keywords like at top left.

Conic Gradients

Conic gradients rotate around a center point, like a color wheel or pie chart. They’re the newest gradient type, supported in all modern browsers.

background: conic-gradient(from 0deg, red, yellow, green, blue, red);

Practical uses: pie charts with hard color stops (conic-gradient(#e74c3c 0% 25%, #3498db 25% 60%, #2ecc71 60% 100%)), loading spinners with a transparent section, and decorative backgrounds.

Color Stops and Transitions

Color stops control where colors appear in the gradient. Without percentages, colors are evenly distributed. With percentages, you control the exact position:

linear-gradient(to right, black 0%, black 40%, white 60%, white 100%)

This creates a sharp transition in the middle 20%. Setting two adjacent stops to the same position creates a hard line with no gradual transition — useful for striped patterns.

Repeating Gradients

Repeating variants tile the gradient pattern. This creates stripes, checkerboards, and other geometric patterns without images.

background: repeating-linear-gradient(45deg, #606dbc 0px, #606dbc 10px, #465298 10px, #465298 20px);

This creates diagonal stripes 10px wide. Repeating gradients are powerful for decorative backgrounds and can replace many pattern images, improving page load time.

Design Tips

Avoid harsh transitions between complementary colors. Red to green creates an ugly muddy middle. Add a neutral middle stop (white or black at 50%) or use analogous colors (colors adjacent on the color wheel).

Use oklch() for perceptual uniformity. Standard sRGB gradients can have unexpected brightness shifts in the middle. OKLCH maintains consistent perceived brightness across the gradient. Not all browsers support it yet, so provide a fallback.

Layer multiple gradients. CSS allows comma-separated gradient layers. A subtle noise gradient over a color gradient adds depth. A transparent-to-color gradient over an image creates text overlay effects.

Frequently Asked Questions

What are the three types of CSS gradients?

Linear (along a line), radial (from a center point), and conic (sweeping around a point). Each has a repeating variant.

How do I create a CSS linear gradient?

background: linear-gradient(direction, color1, color2). Direction can be keywords (to right), degrees (45deg), or omitted for top-to-bottom default.

How do I make a smooth gradient with no banding?

Use wider gradients, add intermediate color stops, choose closer colors, or use oklch() color space for perceptually smoother transitions.

Can I animate CSS gradients?

Not directly. Use background-position/size animation, @property for animatable custom properties, or overlay techniques as workarounds.

What is a conic gradient used for?

Pie charts, color wheels, loading spinners, and clock-face designs. The gradient sweeps around a center point like a radar screen.