Grid backdrop
A dotted or lined grid behind your content, fading out from the centre so it never fights the text. Dots or lines, spacing and a fade shape as props. Pure CSS, tokens only.
Live preview
How it works
Four steps from first call to finished yard.
You know the price and the dates before anything starts.
How it works
Four steps from first call to finished yard.
You know the price and the dates before anything starts.
How it works
Four steps from first call to finished yard.
You know the price and the dates before anything starts.
What you can build with it
A technical or product hero on a dotted grid. A blueprint feel behind a process or pricing section. A quiet texture behind a centred headline.
Props
pattern (select: dots, lines); spacing (select: tight, normal, wide); fade (select: centre, top, none); tone (select: light, dark); slot: content
States shown
One state.
How to change it
Content and options are 4 props in the component's settings panel, and what goes inside is a slot you fill with your own blocks. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .backdrop, .section-intro.
ACSS tokens used
–border-color-dark for the grid ink, –neutral-ultra-light / –neutral-ultra-dark backgrounds.
ACSS requirements
ACSS 4 defaults. Pure CSS; no stylesheet needed.
Version history
Version 1.0.0, September 19, 2026: First release.
Tested with
Etch 1.6.7 and ACSS 4.0.1. Version 1.0.0.
Lifetime members
Members copy this straight into Etch, ready to paste.
Used an earlier version? How to update it
Get lifetime accessWant EtchPress for Bricks or the block editor?
Everything here is made for Etch. Pick the builder you use and leave your email: we write once, when EtchPress works there.