CSS text-shadow: Adding Depth and Legibility to Text
The text-shadow property adds depth to text, like casting a shadow from a light source. Use it for subtle emphasis, letterpress effects, or to make text readable on busy backgrounds. The footgun: not setting a color, as browser defaults vary widely.
Why it exists
Before text-shadow, creating text with depth or making it stand out against a busy background often required using images of text. This was bad for accessibility, search engine optimization, and maintenance. text-shadow provides a native, performant way to apply these effects directly to live, selectable text.
The mental model
Think of text-shadow as creating a copy of your text, coloring it, blurring it, and placing it behind the original. You control the horizontal (x-offset) and vertical (y-offset) position of this copy, how much it's blurred, and its color. You can even stack multiple shadows to create more complex effects like glows or outlines.
How it works
The property takes a comma-separated list of shadows, which are applied from front to back (the first shadow in the list is on top). Each shadow is defined by at least two required length values: offset-x and offset-y. You can also provide an optional blur-radius (a third length value) and a color. The order of values is flexible, but the two offsets are mandatory. For example, text-shadow: 1px 1px 2px black; creates a black shadow offset 1px to the right, 1px down, with a 2px blur.
When to use it
Use text-shadow to enhance readability and add subtle design flair. It's perfect for creating a simple drop shadow to lift text off the page, faking an engraved or "letterpress" look with a light shadow, or improving text legibility over a busy background image by giving the text a soft, dark outline.
When not to use it
Avoid using heavy, dark, or overly blurred shadows that can make text muddy and difficult to read. The primary goal should always be legibility, not decoration. Also, be mindful that using many complex, stacked shadows can have a minor impact on rendering performance, though this is less of a concern on modern hardware.
One canonical example
To make white text readable on a bright, busy photo, you can give it a soft, dark outline. This is achieved by layering four shadows, one for each direction, with a slight blur: text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;. This creates a gentle, uniform halo that separates the text from the background.
Interview question
Which combination of values is the minimum required to define a single text-shadow?
- a.x-offset, y-offset, blur-radius, and color
- b.x-offset and y-offsetCorrect
- c.x-offset, y-offset, and blur-radius
- d.x-offset, y-offset, and color
Why? this is the answer
The card explicitly states that 'Each shadow is defined by at least two required length values: offset-x and offset-y.' While blur-radius and color are frequently used, they are optional parameters.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #design systems
- #typography
- #accessibility
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