Box Shadow

Class Properties
t.shadow

shadowColor: 'rgba(0, 0, 0, 0.1)',

shadowOffset: {width: 0, height: 1},

shadowRadius: 3,

elevation: 1.5,

t.shadowMd

shadowColor: 'rgba(0, 0, 0, 0.1)',

shadowOffset: {width: 0, height: 4},

shadowRadius: 6,

elevation: 3,

t.shadowLg

shadowColor: 'rgba(0, 0, 0, 0.1)',

shadowOffset: {width: 0, height: 10},

shadowRadius: 15,

elevation: 7.5,

t.shadowXl

shadowColor: 'rgba(0, 0, 0, 0.1)',

shadowOffset: {width: 0, height: 20},

shadowRadius: 25,

elevation: 12.5,

t.shadow2xl

shadowColor: 'rgba(0, 0, 0, 0.25)',

shadowOffset: {width: 0, height: 25},

shadowRadius: 50,

elevation: 25,

t.shadowInner

shadowColor: 'rgba(0, 0, 0, 0.06)',

shadowOffset: {width: 0, height: 2},

shadowRadius: 4,

elevation: 2,

t.shadowOutline

shadowColor: 'rgba(66, 153, 225, 0.5)',

shadowOffset: {width: 0, height: 0},

shadowRadius: 0,

elevation: 0,

t.shadowNone

shadowColor: 'rgba(0, 0, 0, 0)',

shadowOffset: {width: 0, height: 0},

shadowRadius: 0,

elevation: 0,

Outer shadow

Use the t.shadow, t.shadowMd, t.shadowLg, t.shadowXl, or t.shadow2xl utilities to apply different sized outer box shadows to an element.

iOS

base
md
lg
xl
2xl

Android

base
md
lg
xl
2xl

Inner shadow

Inner shadows are not supported in react-native. When the default t.shadowInner is used, the inner keyword is ignored.

Outline shadow

Outline shadows are not supported in react-native. When the default t.shadowOutline is used, the outline value will be ignored.

No shadow

Use t.shadowNone to remove an existing box shadow from an element.