Background Pattern 104 - Grid section background with radial mask

Pro

This component generates a multi-layer grid background pattern with a radial gradient mask effect that allows for dynamic styling through customizable class names. It serves as a visually appealing backdrop for content, suitable for enhancing the aesthetic of various user interfaces.

Shadcn Background Pattern 104 block

Component data

ID
background-pattern104
Access
pro
Created
Feb 23, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Background Pattern 104 block design & features

The BackgroundPattern104 component is a specialized shadcn block designed to enhance visual aesthetics by providing an intricate, multi-layer background pattern. It fills the full viewport height and width while allowing content to be neatly centered. This component seamlessly incorporates into various layouts, offering a sophisticated backdrop to elevate a page's design.

Diving deeper, this shadcn component employs an intricate combination of repeating linear gradients, creating a dynamic grid pattern that fades towards the right. The layered design utilizes the oklch color model for subtle, muted tones, contributing to a modern and elegant look. It also features a radial gradient mask, adding a distinctive fade effect from the top-left corner. The BackgroundPattern104's unique design sets it apart, serving both functional and decorative purposes, enhancing user interfaces with minimal effort while maintaining a clean and cohesive visual flow.