Create a vertical black gradient overlay on a background image
CSS gradients, alpha channels, and layering.
Use linear-gradient with rgba black stops, layer it over the image via stacked backgrounds or a pseudo-element.
Adding an extra div instead of native background stacking.
What's really being asked
This question evaluates whether you understand CSS gradients as generated images, how alpha transparency interacts with color stops, and the standard techniques for compositing multiple background layers without unnecessary markup. Seniors should demonstrate fluency in modern background stacking, color syntax, and performance-conscious DOM design.
The full answer
First, the gradient definition itself. You should specify a linear-gradient running top to bottom, which is the default direction, using color stops that include alpha transparency. The top stop is solid black, expressed as rgb(0 0 0) or rgba(0,0,0,1), and the bottom stop is fifty percent transparent black, expressed as rgba(0,0,0,0.5) or the modern rgb(0 0 0 / 0.5) syntax. Second, the overlay strategy. The cleanest approach is to use a single element with multiple background images declared in a comma-separated list on the background-image property, placing the gradient first so it renders above the background image because the first layer is closest to the viewer. You must pair this with background-size and background-position to keep both layers aligned. Third, an alternative using a pseudo-element such as before or after, which is useful when the gradient needs independent positioning or when the base element already has a background image that you cannot modify. Fourth, accessibility and contrast considerations, noting that a dark overlay improves text legibility over busy imagery.
The mistakes people make
A frequent red flag is proposing an extra absolutely positioned div or img tag to act as the overlay. This adds unnecessary DOM weight and complicates responsive behavior. Another mistake is using opacity on a solid black element, which would dim the underlying image uniformly rather than creating a controlled top-to-bottom fade. Some candidates forget that the first value in a comma-separated background-image list paints on top, reversing the expected order and placing the image over the gradient. Others use outdated syntax like filter gradients or vendor-prefixed properties without mentioning the standard modern form.
What usually comes next
An interviewer might ask how you would animate the gradient opacity on hover, which requires transitioning opacity on a pseudo-element or using a CSS custom property for the alpha value. They could also ask how to make the gradient direction responsive, which you can solve with CSS variables for the angle or direction keyword. Another follow-up is supporting older browsers; you should mention that rgba has wide support but that fallbacks can use a solid color with an opaque overlay element if necessary.
A concrete example
Imagine a hero banner with a background photo. You would write background-image: linear-gradient(rgb(0 0 0 / 1), rgb(0 0 0 / 0.5)), url(hero.jpg); background-size: cover; background-position: center; on the banner class. The gradient sits atop the photo, darkening the top fully and fading to half transparency at the bottom, ensuring white headline text remains readable without extra markup.
Interview question
Which method correctly adds a top-to-bottom black gradient overlay—fully opaque at the top to half-transparent at the bottom—directly over a background image without extra DOM elements?
- a.Add an absolutely positioned inner div with background: black and opacity: 0.5.
- b.background-image: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0.5)), url(img.jpg);Correct
- c.Apply filter: brightness(50%) to the element's background image.
- d.background-image: url(img.jpg), linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0.5));
Why? this is the answer
In a comma-separated background-image list, the first layer renders closest to the viewer, so the gradient must be declared before the url to remain visible. Option D reverses that stacking order and hides the gradient behind the photo, while C adds unnecessary markup and D dims the entire image uniformly instead of creating a controlled fade.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles