Page Overlay

The Page Overlay is a single page-wide gradient layer that sits above the page background (3D image, video, environment effect) and below the content. It tints, frames, or fades the whole viewport — the same effect you'd hand-paint over a film still.

It's distinct from the per-section overlay (which only covers one section). Page Overlay covers the entire viewport.

Where to find it

Click the empty canvas area to open Page Settings, then scroll to the Overlay section in the right-side panel. It holds five shape buttons + two colour swatches + an angle slider.

Shapes

Five options cover the common needs:

None (×) — overlay off
Vignette — radial darkening at the edges, transparent centre.

Cinematic; pulls the eye to the middle.

Glow — radial brightening at the centre, transparent edges.

Warm, hopeful; hero pages.

Linear — a one-axis fade (defaults to top-down). The Angle

slider appears for this shape — drag to rotate the gradient.

Frame — both axes fade in from the edges, transparent core.

Puts the page inside a soft picture frame.

Each shape interpolates between Color 1 and Color 2. Using the same colour with different alphas (e.g. rgba(0,0,0,0.55) to rgba(0,0,0,0)) gives a clean fade. Using two different colours gives a duotone tint.

Settings

Shape — button group: None · Vignette · Glow · Linear · Frame

Color 1 / Color 2 — swatches

Both support full RGBA. For Vignette and Frame, Color 2 is typically transparent (rgba(0,0,0,0)) so the centre stays clean. For Glow, Color 1 is the bright spot, Color 2 is the dark edge.

Angle — slider, 0–360° (visible only when Shape = Linear)

Rotates the linear gradient. 0° / 180° = vertical, 90° = horizontal.

When to use it

A 3D image background that needs softening so heading text reads.
A wave / lava / particle effect that should fade at the bottom for

a clean transition between screens.

A page that needs a defined "frame" — Frame shape with low-alpha

black gives a subtle picture-mat effect.

Atmospheric tinting — Glow with a warm colour over a cool environment.

When not to use it

For tinting a specific section only — use the section's own

background or per-section overlay instead.

For darkening just the hero so a single heading reads — set the

hero section's overlay opacity, not page overlay.

When the page background is already a flat solid colour — adding

overlay on top is just changing that colour with extra steps.

Defaults applied automatically

Picking a shape from None for the first time auto-fills sensible default colours (so you see something immediately):

Vignette: black 55% → transparent
Glow: white 25% → transparent
Linear: black 50% → transparent
Frame: black 60% → transparent

Once you've set a colour manually, the defaults stop applying — your choices stick across shape changes.

Performance

Page Overlay renders as a single fixed-position div with a CSS gradient — zero compositing cost beyond a single layer. Safe to combine with 3D backgrounds, scene effects, and entrance animations.

Don't

Don't use Page Overlay AND a per-section overlay on the same screen

for the same effect — they stack and the result is muddier than either alone. Pick one.

Don't set both colours fully opaque and expect to see the page

background through it. The overlay covers the whole viewport.

Don't rely on the angle slider for radial shapes (Vignette / Glow /

Frame) — it's only meaningful for Linear.

blocks/section — for per-section overlays (different scope)
concepts/responsive-overrides — per-device value system