CSS Gradient Tutorial: Linear, Radial, and Conic Gradients

CSS gradients let you create smooth colour transitions between two or more colours without any image files — making your pages faster and more flexible. This tutorial covers all three CSS gradient types with practical examples.

linear-gradient()

The most common gradient type. It creates a transition along a straight line.

background: linear-gradient(to right, #ff6b6b, #4ecdc4);

Direction Options

• to right — left to right
• to bottom right — diagonal
• 45deg — 45-degree angle
• -90deg — bottom to top

Multiple Colour Stops

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

Positioned Stops

/* Hard transition at 50% */
background: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%);

radial-gradient()

Creates a gradient that radiates outward from a central point.

background: radial-gradient(circle, #f7971e, #ffd200, #fff);

• circle — equal radius in all directions
• ellipse — default, stretches to match the element
• at 30% 70% — position the centre point

conic-gradient()

Creates colour stops arranged around a centre point — like slices of a pie.

background: conic-gradient(red, orange, yellow, green, blue, purple, red);
border-radius: 50%; /* Make it a colour wheel */

Repeating Gradients

background: repeating-linear-gradient(45deg, #4facfe 0px, #4facfe 10px, #fff 10px, #fff 20px);

Practical Use Cases

• Hero section backgrounds — diagonal gradient from brand primary to accent
• Text gradients — use background-clip: text + -webkit-text-fill-color: transparent
• Button hover effects — transition from solid to gradient on hover
• Overlays on images — semi-transparent gradient over a photo for readable text
• Progress bars — animated gradient fill

Generate CSS gradients visually with BrainBoost's CSS Gradient Generator. Also try the HTML Color Picker and Color Palette Generator.

Frequently Asked Questions