Background – Once UI

A versatile component for creating decorative backgrounds with various visual effects. Commonly used to add visual interest to sections, cards, or containers while maintaining a clean and modern aesthetic.

Background

<Background
  fill
  height="16"
  gradient={{ 
		display: true, 
		opacity: 1,
		x: 50,
		y: 0,
		colorStart: "accent-background-strong",
		colorEnd: "static-transparent"
  }}
  lines={{
		display: true,
		opacity: 1,
		size: "16",
		thickness: 1,
		angle: 90,
		color: "accent-background-strong"
  }}
  dots={{
		display: true,
		opacity: 1,
		size: "4",
		color: "page-background"
  }}
/>
<Background
	position="absolute"
	fill
	height={16}
	gradient={{ 
		display: true, 
		opacity: 1,
		x: 50,
		y: 100,
		width: 50,
		colorStart: "brand-background-weak",
		colorEnd: "static-transparent"
	}}
/>

Gradient

Create beautiful gradient backgrounds with customizable position, size, and colors.

Gradient

<Background
	fill
	height={16}
	gradient={{ 
		display: true, 
		opacity: 1,
		x: 50,
		y: 0,
		colorStart: "brand-background-strong",
		colorEnd: "accent-background-weak"
	}}
/>

Dots

Add a dotted pattern to your backgrounds with customizable size, color, and opacity.

Dots

<Background
	fill
	height={16}
	dots={{
		display: true,
		opacity: 0.6,
		size: "8",
		color: "brand-background-strong"
	}}
/>

Grid

Create grid backgrounds with customizable color, opacity, and dimensions.

Grid

<Background
	fill
	height={16}
	grid={{
		display: true,
		opacity: 1,
		color: "neutral-alpha-medium",
		width: "1rem",
		height: "1rem"
	}}
/>

Lines

Add diagonal or straight lines to your backgrounds with customizable angle, thickness, and spacing.

Lines

<Background
	fill
	height={16}
	lines={{
		display: true,
		opacity: 0.5,
		size: "16",
		thickness: 1,
		angle: 30,
		color: "brand-solid-strong"
	}}
/>

Stacking

Combine multiple background effects to create unique and visually interesting backgrounds.

Stacking

<Background
  fill
  height={16}
  gradient={{ 
    display: true, 
    opacity: 1,
    x: 50,
    y: 0,
    colorStart: "accent-background-strong",
    colorEnd: "static-transparent"
  }}
  lines={{
    display: true,
    opacity: 1,
    size: "16",
    thickness: 1,
    angle: 90,
    color: "accent-background-strong"
  }}
  dots={{
    display: true,
    opacity: 1,
    size: "4",
    color: "page-background"
  }}
/>

Mask

Create a spotlight or reveal effect with the mask property.

Mask

<Background
	fill
	height={16}
	gradient={{ 
		display: true, 
		opacity: 1,
		x: 50,
		y: 0,
		colorStart: "accent-background-strong",
		colorEnd: "static-transparent"
	}}
	lines={{
		display: true,
		opacity: 1,
		size: "16",
		thickness: 1,
		angle: 90,
		color: "accent-background-strong"
	}}
	mask={{
		x: 50,
		y: 0,
		radius: 50
	}}
/>

API reference

Background Props

Prop	Type	Default
gradient A radial or linear wash: position, size, colours and opacity.	GradientProps	{}
dots A dot field: colour, size and spacing.	DotsProps	{}
grid A grid: colour, line width and cell size.	GridProps	{}
lines Diagonal lines: colour, angle, thickness and spacing.	LinesProps	{}
mask Fade the whole layer through a shape or toward the cursor.	MaskProps	—
className	string	—
style	React.CSSProperties	—
children	React.ReactNode	—
…and every FlexProps prop	inherited	—

GradientProps

Prop	Type	Default
display	boolean	false
opacity	number	1
x	number	50
y	number	50
width	number	100
height	number	100
tilt	number	0
colorStart	string	var(--color-brand-medium)
colorEnd	string	var(--color-success-medium)

DotsProps

Prop	Type	Default
display	boolean	false
opacity	number	1
color	string	brand-on-background-weak
size	SpacingToken	24

GridProps

Prop	Type	Default
display	boolean	false
opacity	number	1
color	string	neutral-medium
width	string	32px
height	string	32px

LinesProps

Prop	Type	Default
display	boolean	false
opacity	number	1
size	SpacingToken	24
thickness	number	1
angle	number	0
color	string	neutral-medium

MaskProps

Prop	Type	Default
cursor	string	—
x	number	—
y	number	—
radius	number	50