Material

Draw the surface of frosted glass material, which can be overlapped with text and graphics to form a content area. type currently supports frosted, style controls the material thickness; the visible effect depends on the content behind it.

Example

function main() {
  return (
    <ZStack>
      <Material type="frosted" style="thin" />
      <Text>CapDrive</Text>
    </ZStack>
  );
}

Usage

Material is a surface with no children or padding. Overlay text with ZStack; frosted appearance depends on what is behind it. type currently accepts frosted, while style selects thickness. Image textures are not accepted.
mask uses alpha: opaque areas reveal, transparent areas hide. Black and white with equal alpha behave identically. A mask does not affect the subject’s layout; size it explicitly and distinguish it from clipped bounds.

Properties

type"frosted"

Material kind. Currently frosted draws native frosted glass.

Example"frosted"

Frosted material appearance, from ultraThin to ultraThick; bar uses the system bar material.

Example"ultraThin"

Common properties

width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example100

height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example80

x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}

background?Paint

Background paint; accepts a color or gradient. Use clear for transparency.

Example"clear"

opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1

cornerRadius?number

Corner radius in points.

Example0

clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse

clip?boolean | "rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"

mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>

zIndex?number

Drawing order among siblings; larger values appear in front.

Example0

blur?number

Blur radius in points; 0 disables blur.

Example4

innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")

shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0

shadowRadius?number

Outer shadow blur radius in points.

Example4

shadowX?number

Outer shadow offset in points: x right, y down.

Example0

shadowY?number

Outer shadow offset in points: x right, y down.

Example2

animations?Animation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <ZStack width={200} height={100}>
      <HStack spacing={0} width="fill" height="fill">
        <Rectangle width="fill" height="fill" background="blue" />
        <Rectangle width="fill" height="fill" background="orange" />
      </HStack>
      <Material
        width={160}
        height={64}
        type="frosted"
        style="thin"
        cornerRadius={16}
      />
      <Text fontSize={28}>78 km/h</Text>
    </ZStack>
  );
}

Animation

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

Properties	When omitted
`type`	`"frosted"`
`style`	`"ultraThin"`

Example

Usage

Properties

Practical example

Animation

When omitted

Related APIs

ZStack

Image

On this page