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