Source: https://app-studio-6167b.web.app/docs/Background

@app-studio/components

# Background

A comprehensive collection of background effects, including animated particles, gradients, images, and videos.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background.tsx)

## Import

```ts
import { Background } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Background } from '@app-studio/components';
import { Vertical } from 'app-studio';
import { Text } from 'app-studio';

export const DefaultDemo = () => (
  <Vertical gap={32}>
    <Text fontSize={16} fontWeight="600">
      Background Component Examples
    </Text>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Aurora Background
      </Text>
      <Background.Aurora height="200px" showRadialGradient={true}>
        <Text color="white" fontSize={18} fontWeight="500">
          Aurora Effect Background
        </Text>
      </Background.Aurora>
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Meteors Effect
      </Text>
      <Background.Meteors number={15} />
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Wall Effect
      </Text>
      <Background.Wall rows={15} cols={10} squareSize={40} />
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Particles Effect
      </Text>
      <Background.Particles
        count={30}
        speed="medium"
        shapes={['circle', 'square']}
      />
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Grid Effect
      </Text>
      <Background.Grid gridSize={25} animationSpeed="medium" />
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Ripples Effect
      </Text>
      <Background.Ripples rippleCount={4} maxSize={150} frequency={2} />
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Background Image
      </Text>
      <Background.Image
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop"
        height="200px"
        backgroundSize="cover"
        blendMode="multiply"
        overlay={<Background.Overlay />}
      >
        <Text color="white" fontSize={18} fontWeight="500">
          Image Background with Overlay
        </Text>
      </Background.Image>
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Background Gradient
      </Text>
      <Background.Gradient
        from="color-blue-500"
        to="color-purple-500"
        height="200px"
        animate={true}
        animationDuration={4}
      >
        <Text color="white" fontSize={18} fontWeight="500">
          Animated Gradient Background
        </Text>
      </Background.Gradient>
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Multi-color Gradient
      </Text>
      <Background.Gradient
        type="radial"
        colors={[
          { color: 'color-red-500', position: '0%' },
          { color: 'color-orange-500', position: '50%' },
          { color: 'color-yellow-500', position: '100%' },
        ]}
        height="200px"
        shape="ellipse"
        position="top-left"
      >
        <Text color="white" fontSize={18} fontWeight="500">
          Radial Multi-color Gradient
        </Text>
      </Background.Gradient>
    </Vertical>
  </Vertical>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Background**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L12) |
| `views` | `{ container?: ViewProps; content?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L14) |
| `shape` | `"square" \| "rounded" \| "pill"` `"square"``"rounded"``"pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L23) |
| `decorationRotation` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L25) |
| `decorationScale` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L27) |
| `decorationOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L29) |

Common inherited styling props (7)

**Background inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

### Background.Layout

**Background.Layout**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shape` | `"square" \| "rounded" \| "pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L33) |
| `views` | `{ container?: ViewProps; content?: ViewProps; back?: ViewProps; front?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L35) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L12) |
| `decorationRotation` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L25) |
| `decorationScale` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L27) |
| `decorationOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L29) |

### Background.Aurora

**Background.Aurora**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `showRadialGradient` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L48) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L12) |
| `views` | `{ container?: ViewProps; content?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L14) |
| `shape` | `"square" \| "rounded" \| "pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L23) |
| `decorationRotation` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L25) |
| `decorationScale` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L27) |
| `decorationOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L29) |

### Background.Meteors

**Background.Meteors**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `number` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L52) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L54) |

### Background.Wall

**Background.Wall**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rows` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L58) |
| `cols` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L60) |
| `squareSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L62) |

### Background.Particles

**Background.Particles**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L66) |
| `colors` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L68) |
| `speed` | `"slow" \| "medium" \| "fast"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L70) |
| `shapes` | `("circle" \| "square" \| "triangle")[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L72) |

### Background.Grid

**Background.Grid**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `gridSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L76) |
| `lineColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L78) |
| `pulseColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L80) |
| `animationSpeed` | `"slow" \| "medium" \| "fast"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L82) |

### Background.Ripples

**Background.Ripples**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rippleCount` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L86) |
| `colors` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L88) |
| `maxSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L90) |
| `frequency` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L92) |

### Background.Image

**Background.Image**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` Required | `string` | `—` | Source URL of the media.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L97) |
| `backgroundSize` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<bg-size>#` **Initial value**: `auto auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-----: \| :----: \| :---: \| \| **3** \| **4** \| **5** \| **12** \| **9** \| \| 1 _-x-_ \| \| 3 _-x-_ \| \| \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L99) |
| `backgroundPosition` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<bg-position>#` **Initial value**: `0% 0%` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L101) |
| `backgroundRepeat` | `BackgroundRepeat` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<repeat-style>#` **Initial value**: `repeat` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L103) |
| `backgroundAttachment` | `"scroll" \| "fixed" \| "local"` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<attachment>#` **Initial value**: `scroll` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L105) |
| `imageOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L107) |
| `blendMode` | `BlendMode` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L109) |
| `overlay` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L111) |
| `views` | `{ container?: ViewProps; content?: ViewProps; image?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L113) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L12) |
| `shape` | `"square" \| "rounded" \| "pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L23) |
| `decorationRotation` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L25) |
| `decorationScale` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L27) |
| `decorationOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L29) |

### Background.Video

**Background.Video**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` Required | `string` | `—` | Source URL of the media.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L125) |
| `autoPlay` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L127) |
| `loop` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L129) |
| `muted` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L131) |
| `playsInline` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L133) |
| `overlay` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L135) |
| `blendMode` | `BlendMode` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L137) |
| `views` | `{ container?: ViewProps; content?: ViewProps; video?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L139) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L12) |
| `shape` | `"square" \| "rounded" \| "pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L23) |
| `decorationRotation` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L25) |
| `decorationScale` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L27) |
| `decorationOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L29) |

### Background.Gradient

**Background.Gradient**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `GradientType` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L17) |
| `direction` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L19) |
| `shape` | `RadialShape` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L21) |
| `position` | `string` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L23) |
| `from` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L25) |
| `to` | `string` | `—` | Destination URL or application route.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L27) |
| `colors` | `ColorStop[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L29) |
| `animate` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L31) |
| `animationDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L33) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L35) |
| `views` | `GradientStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L37) |

### Background.Overlay

**Background.Overlay**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `contentPosition` | `"bottom" \| "left" \| "right" \| "top" \| "center"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L152) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.