CSS - Gradients

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 15–20 minutes

Gradients create smooth color transitions. Master linear, radial, and conic gradients for backgrounds and creative effects.

Learning Objectives

• Create linear gradients with different directions and color stops.
• Apply radial and conic gradients for circular and angular effects.
• Combine gradients with other background layers.

Details & Examples

/* Linear gradients */
.linear-basic { background: linear-gradient(to right, #60a5fa, #34d399); }
.linear-angle { background: linear-gradient(45deg, #f472b6, #a78bfa); }
.linear-stops { background: linear-gradient(90deg, red 0%, yellow 50%, blue 100%); }

/* Radial gradients */
.radial { background: radial-gradient(circle at center, #fde68a, #1d4ed8); }
.radial-ellipse { background: radial-gradient(ellipse at top left, #34d399, transparent 60%); }

/* Conic gradients */
.conic { background: conic-gradient(from 0deg, #fde68a, #60a5fa, #a78bfa, #fde68a); }

Try it

Vocabulary

• Color stop: A color at a specific position in the gradient.
• Gradient line: The direction along which colors transition.

Common Pitfalls

• Too many color stops can make gradients look muddy.
• Conic gradients aren't supported in older browsers; provide fallbacks.

Checks for Understanding

1. How do you create a vertical gradient from top to bottom?
2. What's the difference between circle and ellipse in radial gradients?

Exercises

1. Create a linear gradient that transitions through three colors with custom stop positions (e.g., 0%, 35%, 100%).
2. Make a radial spotlight that fades to transparent at 60% and place it at the top-left corner.