Bottom Band Dot Grid Background

Shadcn UI Background Pattern Block

BackgroundPattern117 is a full-height centered section built with shadcn/ui, with a full-bleed dotted texture layered behind whatever you place in the middle. The grid uses your theme primary, repeated as a fine mesh across the whole area. PatternPlaceholder represents typical hero or page content sitting above the pattern.

Seen as a whole, the dots read strongest along the bottom and ease off toward the top, so the upper field feels quieter for headlines and body copy. Color stays in the primary family with a slightly punchier chroma so the mesh stays visible without turning into a flat tint. Centered content sits in open space with even spacing around it. The block does not animate.

Overall this is a simple, CSS-only decorative backdrop with no images or motion. The bottom-weighted fade is the main idea: texture anchored low, atmosphere above. The dot grid itself is a common device; the directional fade is what gives this variant a clear silhouette. Complexity is low and theme tokens do most of the work.

The section uses at least viewport height so the fade still reads on shorter pages. An optional className on the outer section lets you adjust padding or layout without touching the pattern layer.