Grain overlay
A wrapper that lays fine film grain over whatever you put inside it: a section, a hero, a card. The grain is an SVG noise filter in a data URI, blended over the content, with strength and blend mode as props. No images, no script.
Live preview
Landscaping in Salt Lake County
A yard you will actually use.
Design, build and care from one crew.
Landscaping in Salt Lake County
A yard you will actually use.
Design, build and care from one crew.
Landscaping in Salt Lake County
A yard you will actually use.
Design, build and care from one crew.
What you can build with it
A hero photo with a film texture over it. A flat colour band given some tooth. A card or section that should feel printed rather than digital.
Props
strength (select: light, medium, heavy); blend (select: soft light, overlay, multiply); slot: content; radius (select: card, soft, none), matched to the corners of what you slot in.
States shown
One state. Prints without the grain.
How to change it
Content and options are 3 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 .grain, .grain-demo, .section-intro.
ACSS tokens used
None; the grain is neutral and works on light and 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.