Background Pattern 138 - Striped linear gradient with left fade mask

Pro

This component creates a visually dynamic background with a masked striped pattern using CSS gradients, ideal for use in design elements needing an eye-catching backdrop. It integrates seamlessly with other components to enhance the visual appeal of the user interface.
Shadcn Background Pattern 138 block

Component data

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

Background Pattern 138 block design & features

The BackgroundPattern138 is a visually engaging shadcn block designed to enhance background aesthetics with a unique striped pattern. This component integrates a masked, repeating linear gradient overlay that adds a dynamic texture to its section. With its flexible design, it allows users to incorporate additional styles via an optional className prop, making it easy to tailor the component's appearance to specific needs or themes.

The component's distinct feature is its clever use of masking and repeating gradient patterns. It creates an intricate left striped background that seamlessly transitions from opaque to transparent, adding depth and movement to any layout. Positioned with a PatternTemplate, it ensures consistent design patterns across the interface, making it a valuable piece of the shadcn UI toolkit. This shadcn component works best in projects aiming for an artful blend of minimalist design and visual complexity, differentiating it from more conventional background components.