A sense of continuity.

Standard backgrounds stay inside the page column. Full backgrounds extend to the viewport edges while their content stays aligned. Transparent lets the page background show through.

The surface follows the content column. The page colour remains visible.

The surface follows the content column. Its colour comes directly from the active Page Sections theme.

The surface follows the content column. Its colour comes directly from the active Page Sections theme.

The surface reaches both edges of the viewport. The page colour remains visible.

The surface reaches both edges of the viewport. Its colour comes directly from the active Page Sections theme.

The surface reaches both edges of the viewport. Its colour comes directly from the active Page Sections theme.

All six supported gradients are shown below. Gradients require a full-width background. These consecutive sections use matching endpoints to form a continuous sequence.

A native Page Sections gradient, with readable content aligned to the page.

A native Page Sections gradient, with readable content aligned to the page.

A native Page Sections gradient, with readable content aligned to the page.

A native Page Sections gradient, with readable content aligned to the page.

A native Page Sections gradient, with readable content aligned to the page.

A native Page Sections gradient, with readable content aligned to the page.

The next three sections belong to an explicit SectionSurfaceGroup. Adjacent opaque surfaces connect even when their colours differ: the first keeps its top corners, the last keeps its bottom corners, and the middle joins both. A transparent section separates the next surface.