STYLES

Shadow

Add the same soft exterior shadow on web, Android, and iOS, then tint it with the semantic colors from your theme.

PLAYGROUND

Choose a shadow

Use shadow for a progressive soft blur and shadowColor for a theme-aware tint. The generated snippet follows both selections.

Shadow size
Shadow color
dowe
Card shadow:"" shadowColor:"" p:6 rounded:"md"
  Text "Theme-aware shadow"

COMPONENT EXAMPLES

One style contract

Card, Button, Avatar, Chip, and Input use the same portable shadow scale and semantic color families.

CARD

Release ready

A primary shadow separates related content from the page.

BUTTON

AVATAR

D

CHIP

Validated

INPUT

SIZE SCALE

Five shadow levels

xs

sm

md

lg

xl

SEMANTIC COLORS

Eight theme families

API

Props

Declare shadow without shadowColor for the neutral target default, or combine both props for a semantic tint.

Prop
Type
Default

No data

There are no records to display