Background Pattern 43 - Grid and dot section background with bottom radial fade

Pro

This component renders a full-screen background pattern featuring a grid with dots, enhanced by a gradual fade effect from the bottom. It is ideal for adding visually appealing and customizable backgrounds to various layouts by adjusting the className prop.

Shadcn Background Pattern 43 block

Component data

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

Background Pattern 43 block design & features

BackgroundPattern43 is a versatile shadcn block designed to enhance visual appeal by overlaying a dynamic background pattern on a section element. This component integrates a blend of gradients and shapes to create an aesthetically striking background, seamlessly blending into any layout while providing a stylish backdrop. Its primary purpose is to serve as a foundation for content, drawing attention through its geometric design while maintaining focus on the central content area via a subtle fade effect.

The BackgroundPattern43 distinguishes itself through its intricate design featuring a combination of linear and radial gradients. The use of CSS variables allows for easy customization of coloration to match different themes or brand guidelines. By employing a strategic mask gradient, the component achieves a unique fade-out effect from the center outward, contributing to a cohesive and professional look. The placement of the PatternPlaceholder element further adds flexibility, enabling developers to integrate additional shadcn UI elements effortlessly, making this component ideal for creating visually compelling and engaging user experiences.