Question 1

What is the syntax of CSS text-shadow?

Accepted Answer

text-shadow takes offset-x, offset-y, an optional blur-radius and a color, for example text-shadow: 2px 2px 4px rgba(0,0,0,0.5). offset-x and offset-y move the shadow right/down (negative values go left/up), blur-radius softens it, and the color (often rgba so you can set opacity) fills it. The blur and color are optional, so 1px 1px is valid.

Question 2

How do I add multiple text shadows?

Accepted Answer

Separate each shadow with a comma in the same text-shadow declaration, for example text-shadow: 1px 1px 0 #000, 0 0 8px #ff00de. The first shadow in the list is painted on top, the last is painted at the bottom. Stacking several layers is how neon glows, 3D extrusions and outlines are built from a single property.

Question 3

What does the blur-radius do in text-shadow?

Accepted Answer

The blur-radius is the third length value. At 0 the shadow has a hard, crisp edge, which is what you want for outlines and 3D text. Larger values spread the shadow out into a soft halo, which is the basis of glow and neon effects. Negative blur values are not allowed.

Question 4

How do I make neon glowing text with text-shadow?

Accepted Answer

Stack several zero-offset, high-blur shadows in the same accent color, for example text-shadow: 0 0 7px #fff, 0 0 14px #ff00de, 0 0 28px #ff00de. Light text on a dark background sells the effect. Each extra layer with a bigger blur widens the halo so the glow looks brighter and more saturated.

Question 5

What is the difference between text-shadow and box-shadow?

Accepted Answer

text-shadow casts a shadow from the shape of the glyphs (the letters themselves), while box-shadow casts a shadow from the rectangular box of an element. text-shadow has no spread value and no inset keyword; box-shadow supports both. Use text-shadow for typography effects and box-shadow for cards, buttons and panels.

Text ShadowGenerator

Text Shadow
Generator