Text Shadow Generator
Design readable text shadows with live preview and copy CSS
Design readable text shadows with live preview and copy CSS
text-shadow: 2px 2px 4px #00000080;
color: #ffffff;text-shadow draws a shadow behind the rendered glyphs of an element, taking offset-x offset-y blur color values. Unlikebox-shadow there is no spread and noinset — shadows always follow the letterforms exactly, which is what makes them look clean on curved and serif type.
0 0 2px #fff, 0 0 8px #14b8a6, 0 0 20px #14b8a6.-webkit-text-stroke.Shadows can damage legibility if they're strong enough to compete with the glyph itself. Keep blur + offset below the stroke weight of the font, and verify contrast with our Contrast Checker against the effective background color behind the text.