Right Fade Dot Grid Background

Background Pattern 112Pro

A full-height centered section whose primary dot grid is masked so the pattern is strongest toward the upper left and softens toward the right, including PatternPlaceholder as sample content.

Shadcn UI Background Pattern Block

BackgroundPattern112 is a full-height centered section built with shadcn/ui, with a fine primary-colored dot grid covering the backdrop. The fade anchors near the upper left, so texture concentrates on that side and eases out toward the right. PatternPlaceholder shows typical centered foreground content.

Color comes from the primary token with slightly higher chroma, read as a crisp mesh instead of a flat tint. The ellipse mask keeps the transition organic. Layout leaves open space around the middle. The block is static.

Paired with the right-weighted variant, this gives you a mirrored option for asymmetric layouts. Otherwise it is a straightforward decorative shell with low content demand beyond replacing the placeholder.

className on the section forwards for layout tweaks. The pattern scales with the section on any viewport size.

Dependencies

PackageType
pattern-placeholder
@shadcnblocks
Registry