Skip to main content

Figma text shadow

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

figma DropShadowEffect

W3C

drop-shadow​

css

syntax

  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;

flutter

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

inner-shadow​

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