How to Make CSS Gradients — Linear, Radial & Multi-Color Guide

CSS gradients look intimidating in code but follow a simple pattern: type, direction, colors. Once you understand the syntax, you can build any gradient from scratch — or use a visual builder to skip the syntax entirely.

Linear Gradient — Step by Step

Linear gradients flow color in a straight line. The syntax:

background: linear-gradient(direction, color1 position, color2 position);

Direction Value	Visual Result	Example
to right (or 90deg)	Left → Right	linear-gradient(to right, #667eea, #764ba2)
to bottom (or 180deg)	Top → Bottom	linear-gradient(to bottom, #f093fb, #f5576c)
135deg	Diagonal (top-left → bottom-right)	linear-gradient(135deg, #a8edea, #fed6e3)
to top-left (or 315deg)	Bottom-right → Top-left	linear-gradient(to top-left, #00f260, #0575e6)
45deg	Diagonal (bottom-left → top-right)	linear-gradient(45deg, #f7971e, #ffd200)

Key insight: 0deg points upward (bottom to top). Degrees increase clockwise — 90deg is left to right, 180deg is top to bottom. Keywords like "to right" are more readable when direction matters more than precise angle.

Radial Gradient — Step by Step

Radial gradients spread color outward from a center point:

background: radial-gradient(shape size at position, color1, color2);

Property	Options	Example
Shape	circle, ellipse (default)	radial-gradient(circle, #f7971e, #ffd200)
Size	closest-side, farthest-corner, exact px	radial-gradient(circle 200px, #f00, #00f)
Position	at center (default), at top left, at 25% 75%	radial-gradient(circle at top left, #f00, #00f)
Multiple stops	Add colors with positions	radial-gradient(circle, #fff 0%, #eee 70%, #999 100%)

Radial gradients create natural spotlight effects. A light center fading to a darker edge mimics real-world lighting — use it for hero sections, image vignettes, or circular highlights.

Conic Gradient — Step by Step

Conic gradients sweep color around a center point like a clock:

background: conic-gradient(from angle at position, color1, color2);

Use Case	CSS	Result
Color wheel	conic-gradient(red, yellow, lime, aqua, blue, magenta, red)	Full rainbow sweep
Pie chart	conic-gradient(#f5576c 0% 40%, #667eea 40% 70%, #4facfe 70% 100%)	Three colored sections
Subtle sweep	conic-gradient(from 45deg, #161b22, #21262d, #161b22)	Dark mode decorative ring

Adding Color Stops

Color stops give you precise control over where each color appears:

• Even distribution (default): linear-gradient(to right, red, blue) — red at 0%, blue at 100%, smooth blend
• Custom positions: linear-gradient(to right, red 0%, red 30%, blue 30%) — hard color change at 30% (no smooth transition)
• Weighted blend: linear-gradient(to right, #667eea 0%, #667eea 60%, #764ba2 100%) — more blue, less purple

Hard stops (same position for end of one color and start of next) create stripes. Separated stops create smooth transitions. The gradient generator lets you drag stops visually instead of guessing percentages.

Repeating Gradients

Repeating gradients tile a small pattern across the element:

• Diagonal stripes: repeating-linear-gradient(45deg, #f5576c 0px, #f5576c 10px, transparent 10px, transparent 20px)
• Horizontal bars: repeating-linear-gradient(0deg, #eee 0px, #eee 2px, transparent 2px, transparent 20px)
• Bullseye: repeating-radial-gradient(circle, #000 0px, #000 5px, #fff 5px, #fff 10px)

Layering Multiple Gradients

Stack gradients using commas. The first gradient is on top:

• Overlay on gradient: background: linear-gradient(rgba(0,0,0,0.3), transparent), linear-gradient(90deg, #667eea, #764ba2);
• Cross-hatch pattern: Two repeating gradients at different angles
• Gradient + image: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(hero.jpg);

Text Gradients (background-clip Trick)

Create gradient text in three CSS properties:

1. background: linear-gradient(90deg, #f5576c, #667eea);
2. -webkit-background-clip: text; background-clip: text;
3. color: transparent;

The gradient becomes the text color. Works in all modern browsers. Pair with large headings for maximum visual impact — small text gradients are hard to see.

Common Mistakes

Mistake	Why It Happens	Fix
Gradient looks flat	Only two very similar colors	Increase color contrast between stops
Wrong direction	Confusing degree system	Remember: 0deg = bottom→top, 90deg = left→right
Adding vendor prefixes	Copied old code from Stack Overflow	Remove -webkit- prefix — not needed since ~2015
Gradient does not show	Applied to inline element	Gradients need a block/inline-block element with dimensions
Color banding	Large area, similar colors	Add intermediate stops or a subtle noise overlay

Tools for Your Gradient Workflow

• CSS Gradient Generator — build any gradient visually
• Box Shadow Generator — pair shadows with gradient elements
• Color Picker — find perfect colors for your stops
• Code Formatter — format CSS with multiple gradient declarations
• Hex-RGB Converter — switch between color formats