CSS Academy · Lesson

Gradients: Linear and Radial

Create smooth color transitions with linear-gradient() and radial-gradient().

Gradients: Linear and Radial is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is a CSS Gradient?

CSS gradients are generated images (no image file needed) that transition between two or more colors. They are specified as values of background-image or the background shorthand.

linear-gradient() Basics

A linear gradient transitions colors along a straight line. The first argument sets the direction, followed by color stops.

background: linear-gradient(to right, #ff6347, #1e90ff);

Gradient Direction: Keywords and Angles

Direction can use keywords or degree angles:

background: linear-gradient(to bottom right, red, blue);
background: linear-gradient(45deg, red, blue);
background: linear-gradient(135deg, #667eea, #764ba2);

Multiple Color Stops

Add as many color stops as needed. Each stop can optionally specify a position (length or percentage).

background: linear-gradient(
  to right,
  #f8cdda 0%,
  #1d2b64 50%,
  #0f2027 100%
);

Hard Color Stops

Set two stops at the same position to create a hard stop — an abrupt color change with no blend.

background: linear-gradient(
  to right,
  red 50%,
  blue 50%
);
/* left half red, right half blue */

Repeating Linear Gradient

repeating-linear-gradient() tiles the gradient pattern to create stripes and textures.

background: repeating-linear-gradient(
  45deg,
  #f0f0f0,
  #f0f0f0 10px,
  #ccc 10px,
  #ccc 20px
);

radial-gradient() Basics

A radial gradient radiates outward from a center point in an elliptical or circular shape.

background: radial-gradient(circle, #f8cdda, #1d2b64);

Radial Shape and Size

Control the gradient shape (circle or ellipse) and its extent keyword:

background: radial-gradient(circle at center, yellow, orange, red);
background: radial-gradient(ellipse closest-side, white, gray);

Radial Gradient Position

Use at <position> after the shape/size to move the center of the radial gradient.

background: radial-gradient(
  circle at top left,
  rgba(255,255,255,0.8),
  transparent
);

Conic Gradient

conic-gradient() sweeps colors around a center point like a pie chart. It requires the from start angle and optional at position.

background: conic-gradient(red 0deg, yellow 120deg, blue 240deg, red 360deg);

Gradient Transparency

Use transparent or rgba() in gradient stops to fade in or out smoothly from an element's background color.

background: linear-gradient(
  to bottom,
  rgba(0,0,0,0),
  rgba(0,0,0,0.7)
);
/* Dark fade overlay */

Quick Check

Which CSS function generates a gradient that radiates outward from a center point?

Recap

Linear gradients go along a line, radial gradients radiate outward, and conic gradients sweep around a point. Use hard stops for stripes. All gradient functions are background-image values and generate images without external files.

Frequently asked questions

Is the “Gradients: Linear and Radial” lesson free?

Yes — the full text of “Gradients: Linear and Radial” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Gradients: Linear and Radial”?

Create smooth color transitions with linear-gradient() and radial-gradient(). You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Gradients: Linear and Radial” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy