0Pricing
CSS Academy · Lesson

Gradients: Linear and Radial

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

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);

All lessons in this course

  1. Color Values: Named, Hex, RGB, HSL
  2. Background Color and Image
  3. Gradients: Linear and Radial
  4. Opacity and RGBA Transparency
← Back to CSS Academy