FlowBackground

Decorative dots / grid / cross canvas background, drawn purely in CSS gradients.

Category: display · WCAG 2.1-AA · flow, background, grid, dots, canvas

Variants

dots
grid
cross

Props

Prop	Type	Default	Description
`variant`	`'dots' \| 'grid' \| 'cross'`	`dots`	Pattern style.
`gap`	`number`	`20`	Cell spacing (px).
`size`	`number`	`1`	Dot radius / line thickness (px).
`color`	`string`	—	Pattern color (defaults to the border token).
`className`	`string`	—	Additional CSS class names merged onto the root element.

Design tokens

--cascivo-color-border

When to use

Giving a flow canvas a sense of space and scale with a dotted or grid backdrop
Reinforcing pan/zoom by letting the pattern move and scale with the viewport

When not to use

As a page background — this is a flow-canvas decoration, not a general surface

Examples

Dotted background

A dotted grid behind a flow canvas.

() => (
  <div style={{ position: 'relative', height: 220, overflow: 'hidden' }}>
    <FlowBackground variant="dots" gap={24} />
  </div>
)

Grid and cross

The grid and cross variants.

() => (
  <div style={{ display: 'grid', gap: 16, gridTemplateColumns: '1fr 1fr' }}>
    <div style={{ position: 'relative', height: 180, overflow: 'hidden' }}>
      <FlowBackground variant="grid" gap={28} />
    </div>
    <div style={{ position: 'relative', height: 180, overflow: 'hidden' }}>
      <FlowBackground variant="cross" gap={28} size={4} />
    </div>
  </div>
)

Related components

FlowCanvas — Lives inside the canvas pane.

← Back to docs