Create a vertical black gradient overlay on a background image

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: developer.mozilla.org