Skip to main content

Figma text shadow

The text shadow is handled as the shadow of the effect from figma.

figma DropShadowEffect





  1. offsetX offsetY blurRadius color
  2. color offsetX offsetY blurRadius
  3. offsetX offsetY color
  4. color offsetX offsetY
text-shadow: 1px 1px 2px #ff2;
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;


offset: Offset(10.0, 10.0),
blurRadius: 3.0,
color: Color.fromARGB(255, 0, 0, 0),


It is not currently supported, and it appears to be replaced with drop-shadow.

Why is there no spread radius support for text shadow?

W3 describes why there is not current spread property support for text-shadow, thous we can expect this to be supported in the future. Yet other platform such as Flutter also has no spread support

from w3's Text Shadows: the text-shadow property

Also unlike box-shadow, the spread distance is strictly interpreted as outset distance from any point of the glyph outline, and therefore, similar to the blur radius, creates rounded, rather than sharp, corners. Note: The painting order of shadows defined here is the opposite of that defined in the 1998 CSS2 Recommendation. The text-shadow property applies to both the ::first-line and ::first-letter pseudo-elements. Level 4 adds a spread radius argument to text-shadow, using the same syntax and interpretation as for box-shadow, except that corners are always rounded (since the geometry of a glyph is not so simple as a box).

More about Shadow on text in core CG Level