The linear gradient mask runs from top (fully opaque) to bottom (fully transparent), creating a natural fade as the pattern approaches the bottom of the viewport. This CSS-only approach works without JavaScript and adapts to any container height.

The dot pattern uses the same 8px grid spacing as other dot backgrounds. Dots render at 30% opacity with automatic dark mode color switching. Combine with scroll-triggered content below for a layered page feel.

Fits well with long-form landing pages, above-the-fold hero sections, product pages with feature sections below, and any layout where content continues past the initial viewport.