Text Shadow

Use text-shadow-* utilities to add shadows to text.

Basic example

Use utilities like text-shadow-sm and text-shadow-lg to apply different sized text shadows to a text element:

Style('text-shadow-2xs ...', child: Text('The quick brown fox...'))
Style('text-shadow-xs ...', child: Text('The quick brown fox...'))
Style('text-shadow-sm ...', child: Text('The quick brown fox...'))
Style('text-shadow-md ...', child: Text('The quick brown fox...'))
Style('text-shadow-lg ...', child: Text('The quick brown fox...'))

Changing the opacity

Use the opacity modifier to adjust the opacity of the text shadow:

Style('text-shadow-lg ...', child: Text('The quick brown fox...'))
Style('text-shadow-lg/20 ...', child: Text('The quick brown fox...'))
Style('text-shadow-lg/30 ...', child: Text('The quick brown fox...'))

The default text shadow opacities are quite low (20% or less), so increasing the opacity (to like 50%) will make the text shadows more pronounced.

Setting the shadow color

Use utilities like text-shadow-indigo-500 and text-shadow-cyan-500/50 to change the color of a text shadow:

Style('text-sky-950 text-shadow-2xs text-shadow-sky-300 ...', child: Text('Book a demo'))
Style('text-gray-950 ...', child: Text('See pricing'))

By default colored text shadows have an opacity of 100% but you can adjust this using the opacity modifier.

Removing a text shadow

Use the text-shadow-none utility to remove an existing text shadow from an element.

Style('text-shadow-lg', child: const Text('with shadow'));
Style('text-shadow-none', child: const Text('no shadow'));

Class reference

Class	Description
text-shadow-2xs	2x extra small text shadow
text-shadow-xs	Extra small text shadow
text-shadow-sm	Small text shadow
text-shadow	Default text shadow
text-shadow-md	Medium text shadow
text-shadow-lg	Large text shadow
text-shadow-none	Remove text shadow
text-shadow-{color}	Override the text-shadow color (e.g. text-shadow-sky-300)
text-shadow-{color}/{opacity}	Color override with explicit alpha
text-shadow-{size}/{opacity}	Size with alpha override (e.g. text-shadow-lg/20)