Background Pattern 80 - Starfield background with left-side fade and vignette

Pro

This component creates a visually dynamic background pattern featuring a sparse starfield with a fade effect and vignette overlay. It is designed to seamlessly integrate with different classes, allowing for flexible styling and customization.

Shadcn Background Pattern 80 block

Component data

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

Background Pattern 80 block design & features

The BackgroundPattern80 component provides a visually engaging backdrop, perfect for enhancing the aesthetic appeal of a web layout. It fills the entire viewport, ensuring seamless integration with the surrounding design elements. This component features a sparse starfield effect, blending subtly into the background with a vignette overlay to create a focal point. This makes it ideal for use as a central design feature in applications seeking to highlight content against an elegant, dynamic background.

In more detail, the BackgroundPattern80 shadcn block utilizes advanced gradient techniques to craft an intricate particle field. The design is centered on a dual-layer radial gradient effect, offering depth and dimension by transitioning from a denser central area to transparency. Complemented by a vignette overlay, this pattern naturally guides the viewer’s eye towards central content, making it especially effective in user interfaces eager to balance attention between background artistry and foreground elements. Its unique composition and meticulous styling make it a desirable addition for developers looking to leverage the creative strengths of the shadcn ui.