Layered gradients

Learn to layer multiple gradients.

Multiple backgrounds

You can give an element more than one background, separated by commas. background: linear-gradient(...), url(...); layers the gradient on top of the image. The first one written sits on top.

Combining a gradient with an image is common: you lay a soft color blend over the image. It improves readability and adds depth.

Layering two gradients

You can layer two gradients too. To scatter a translucent radial gradient over a linear one: background: radial-gradient(...), linear-gradient(...);. The radial sits on top because it is written first.

This is how button shines, card depth, or hero atmosphere are built. Use rgba to make colors translucent so the gradient below shows through.

Dark gradient over an image

The most common layered use is to scatter a dark gradient over an image. linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(photo.jpg) pulls a translucent black veil over the picture.

This trick makes text on the image more readable. You will meet it often in hero areas, banner strips, and card covers; especially useful for keeping white text legible.

Exercise Layer a gradient over the hero image

Define a two-layer background for the .hero selector. The first layer is linear-gradient(to bottom, rgba(0,0,0,0.4), transparent), the second is url(beach.jpg). Write a single comma-separated background declaration.

Show example solution

/* layer the hero background */
.hero {
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent), url(beach.jpg);
}

Test yourself

When two backgrounds are comma-separated, which is on top?
```
background: linear-gradient(...), url(bg.png);
```
- The first one (linear-gradient)
- The last one (url(bg.png))
- They sit side by side
- Only the image shows, the gradient hides
Show answer

The first one (linear-gradient) — Correct. In multiple backgrounds, the first written layer sits on top.

Write the horizontal linear gradient as the second layer

background: radial-gradient(circle, rgba(255,255,255,0.4), transparent), ____;

Show answer

background: radial-gradient(circle, rgba(255,255,255,0.4), transparent), linear-gradient(to right, navy, teal);

Next lesson: Summary - Button variations

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies