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

Pro

The BackgroundPattern45 component creates a visually appealing background pattern with linear and radial gradients, featuring a white grid with dots that fades at the bottom left. Use it to enhance sections by adding depth and texture, while allowing for customizable styling through additional class names.

Shadcn Background Pattern 45 block

Component data

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

Background Pattern 45 block design & features

The BackgroundPattern45 component is a visually distinctive design element that incorporates a unique background pattern. Its primary function is to serve as a backdrop, enhancing the visual appeal of any section it is applied to. By utilizing a combination of grid lines and radial gradients, the shadcn block introduces a subtle complexity to the background, making it stand out as an artistic element within a layout.

Delving deeper, the BackgroundPattern45 component is thoughtfully designed with a focus on visual aesthetics. It employs a structured layout with absolute positioning, allowing the background pattern to cover the entire section seamlessly. The component utilizes CSS gradients to create a grid overlay effect combined with a dotted radial gradient. This layering of visual elements contributes to its unique appearance. Additionally, the use of mask images introduces an innovative effect that fades from an elliptical shape toward the bottom left corner, enhancing the overall visual experience. The integration of the PatternPlaceholder from the shadcn UI further enriches the design, providing a placeholder for further customization or content layering. These features collectively make the component a distinctive and versatile choice for designers seeking to elevate their visual design with minimal effort.