text shadow over image
Placing a light heading over a photo background is the most common reason people reach for text-shadow, but shadow alone does not solve contrast, because the color behind the text changes pixel by pixel across the photo. This page shows how far text-shadow actually helps and why an overlay or a gradient remains the real foundation for a readable title over any image.
The wide 8px blur spreads the shadow past the letter outline, which helps in the photo bright region, but it still falls short if a white cloud sits directly behind the title.
The gradient darkens only the bottom third of the image, where the title sits, leaving the rest of the photo free of a dark veil and no longer dependent on text-shadow for the main contrast.
Reversing the logic works on mostly dark photos, such as a night scene, but it still fails near any bright light source inside the frame.
Yes. The property takes a comma-separated list, painted front to back, the first shadow sits on top. That is how multi-layer outlines and glows are created.
No, because the WCAG 2.1 contrast ratio compares text and background pixel by pixel, and a photo has variable luminance; a fixed text-shadow helps across the more uniform regions of the image, but it fails exactly where the photo shifts from bright to dark underneath the text itself.
There is no universal number, because it depends on the text color and the average luminance of the photo under the overlay; common practice starts at 40% to 50% black and increases until a measured ratio, checked with a contrast tool, reaches 4.5:1 for normal text or 3:1 for large text.
Photos resized for a small screen lose fine detail and sometimes gain more internal contrast from compression, so a shadow and overlay combination calibrated on desktop may leave no safety margin on a smaller screen; always test at the real display size, not just zoomed in.
Yes, and it is the most robust combination: a light 30% to 40% overlay solves the average contrast across the whole image, and a short 2 to 3px blur shadow only reinforces the letter edges at the points where the overlay alone still leaves reading marginal.
color: #E6ECE8;
text-shadow: 3px 4px 8px #3DDC97,
6px 8px 10px #3DDC97,
9px 12px 12px #3DDC97;CSS is calculated locally; the text is not sent to the server.