LESSON 5.3

CSS Gradients

Create beautiful color transitions without image files

Learn how to use CSS gradients to build smooth color transitions for backgrounds and design elements. No image files needed, and they load faster too.

💡 The Concept

CSS gradients let you create smooth color transitions as a background image, without using an image file. That makes them fast to load and a great choice for backgrounds, buttons, and decorative sections. The screenshot below demonstrates what you can do with gradients. They are the presets on the Gradient Generator.

Sample gradients from the Gradient Generator on WebDevStudent.com.

There are two main types: linear gradients (colors flow in a straight line) and radial gradients (colors radiate outward from a center point).

Screenshot showing the difference between linear, radial and conic gradients.

Linear Gradients

The basic syntax flows from top to bottom by default:

background-image: linear-gradient(green, pink);

You can control the direction using keywords or degrees:

/* Left to right */
background-image: linear-gradient(to right, green, pink);

/* Diagonal */
background-image: linear-gradient(to bottom right, navy, lightblue);

/* Using degrees */
background-image: linear-gradient(135deg, navy, lightblue);

Add more color stops to create richer gradients:

background-image: linear-gradient(to right, red, yellow, green);

You can also control exactly where each color begins using percentages:

background-image: linear-gradient(to right, navy 0%, royalblue 60%, lightblue 100%);

Radial Gradients

A radial gradient radiates outward from a center point:

background-image: radial-gradient(circle, yellow, orange);

Applying a Gradient to an Element

Use a gradient the same way you would use any background image:

.hero {
  background-image: linear-gradient(to right, #1a1a2e, #16213e);
  color: white;
  padding: 60px 40px;
}

Gradients are much faster to load than image files, making them a great choice for page performance.

Exercise: Try It Yourself

Step 1. Open JSFiddle and paste this into the HTML panel:

<h1>Minneapolis Lakes</h1>

Then paste this into the CSS panel:

body {
  height: 400px;
  text-align: center;
}

Step 2. Open the Gradient Generator, design a linear gradient you like, and copy the CSS. Add it to the body rule in the CSS panel as the background-image. Run your Fiddle. (If the text is difficult to read, try changing it to white.)

JSFiddle demonstrating the code for a gradient.

Step 3. Back in the Gradient Generator, try changing the direction. Update the CSS in JSFiddle and see how it changes.

Step 4. Try a radial or conic gradient.

📌 Tools of the Trade: Use the Gradient Generator any time you need gradient CSS — design it visually and copy the code. Bookmark the Tools of the Trade page for quick access to all course tools.

Frequently Asked Questions

What is the difference between background-color and background-image for gradients?

background-color sets a single solid color. Gradients are technically background images — even though there is no image file — so they use the background-image property. You can also use the shorthand background property for either one.

Do I need to write gradient code by hand?

No. The Gradient Generator on the Tools of the Trade page lets you design gradients visually and copy the ready-to-use CSS. Writing it by hand is useful to understand the syntax, but in practice most developers use a generator.

What is a color stop?

A color stop is a point in the gradient where a specific color is set. By default, two color stops are placed at 0% and 100%. You can add more stops and control their positions with percentages, for example: linear-gradient(to right, red 0%, yellow 40%, green 100%).

Can I use transparency in a gradient?

Yes. Use rgba() or transparent as a color stop. For example, linear-gradient(to right, rgba(0,0,0,0.8), transparent) creates a dark overlay that fades out — a common technique for text legibility over photos.

What is the difference between linear, radial, and conic gradients?

A linear gradient flows in a straight line from one color to another. A radial gradient radiates outward from a center point, like a spotlight. A conic gradient sweeps the colors around a center point like the face of a clock. All three are created with CSS — no image file needed.

Can I use a gradient on text?

Yes, with a small workaround. Apply the gradient as a background-image on the text element, then add -webkit-background-clip: text and -webkit-text-fill-color: transparent. This clips the gradient to the shape of the text characters.

Do gradients work in all browsers?

Linear and radial gradients are supported in all modern browsers. Conic gradients have excellent support in current browsers as well. If you need to support very old browsers, a solid background-color fallback before your background-image line will ensure those users see something reasonable.

★ Key Takeaways

Gradients let you blend colors smoothly without using an image file. This lesson showed you how to create linear and radial gradients using only CSS. Next up is CSS Box Shadows, where you will learn to add depth and dimension to elements using the box-shadow property.

Next Lesson: CSS Box Shadows

← Back to Borders, Shadows, and More Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.