Background Dots Masked Vertical
A dotted pattern with a linear vertical mask that fades from top to bottom. Ideal for hero sections where content continues below the fold.
Web apps that make you feel like you're in the future
We are a team of developers who are passionate about creating web apps that make you feel like you're in the future.
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.
More from Backgrounds
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessAbout this block
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.