Shadows

boxShadow draws one or more drop shadows behind a node: the node's rounded box, offset, grown by a spread and softened by a blur. Shadows never affect layout.

#Usage

<node
  style={{
    width: 160,
    height: 90,
    borderRadius: 12,
    backgroundColor: "#1a1b26",
    boxShadow: {
      color: "rgba(0, 0, 0, 0.5)",
      yOffset: 6,
      blurRadius: 16,
    },
  }}
/>

#Fields

Every field is optional:

• A bare number is pixels; strings take units (see Units). Percentages resolve against the node's width, except yOffset, which uses its height. "auto" counts as 0.
• An omitted color is opaque black; give the color an alpha for a soft shadow.
• The shadow follows the node's borderRadius, scaled with the spread.
• A blurred shadow reaches about three times blurRadius beyond its shape.

#Several shadows

An array draws several shadows under the same node:

<node
  style={{
    boxShadow: [
      { color: "#4f8cff55", blurRadius: 28, spreadRadius: 6 },
      { color: "#ff000066", yOffset: 4, blurRadius: 6 },
    ],
  }}
/>

The shadows paint in array order: the first is at the back, and each later one draws over the earlier ones where they overlap. This is the reverse of CSS, where the first shadow is on top.

#Painting rules

• Shadows paint under the node's background, at the node's place in the stacking order: siblings painted after the node cover its shadow, and an ancestor's overflow clipping cuts it.
• A shadow is a full rounded box, not a ring around the node: a translucent or missing backgroundColor lets it show through the node.
• A fully transparent shadow, and one whose spread shrinks it to nothing, are skipped.
• On a node without a composited layer, opacity does not fade the shadow (see Opacity).
• boxShadow has no transition channel or { animated } binding: a change snaps. Changing it from React repaints the node without re-running layout.

#Text shadows

<text> takes a separate textShadow style: one hard-edged copy of the glyphs, offset by offsetX/offsetY pixels.

<text style={{ textShadow: { color: "#00000080", offsetX: 2, offsetY: 2 } }}>
  Shadowed
</text>

See <text> for its defaults and rules.

#Limits

• There are no inset shadows.
• On a node promoted to a composited layer (for example opacity on a node with children, or a filter), the shadow is captured with the layer and cut off at the node's border box. Put the shadow on a wrapper node that is not promoted.

See boxShadow in the style reference.