Background Pattern 96 - Corner Gradient Stack With SVG Noise

Pro

A min-height screen section with stacked corner radial gradients from chart colors and a full-bleed SVG fractal noise layer at reduced opacity in overlay blend.
Shadcn Background Pattern 96 block

Component Data

  • ID:background-pattern96
  • Access:pro
  • Created:Feb 23, 2026
  • Type:block

Background Pattern 96 block design & features

BackgroundPattern96 is a full-screen backdrop built with shadcn/ui. The base layer stacks several radial gradients from the upper-left area using chart palette variables to create a bright pocket that falls off toward the rest of the background color. A separate SVG layer applies fractal noise with feTurbulence, desaturated, at partial opacity and overlay blend so the grain sits on top without washing out color.

Compared with pure CSS noise, the SVG approach yields softer organic variation. Corner-weighted lighting keeps attention toward one diagonal, useful behind cards aligned opposite.

Moderate complexity, still image-free. Pairs well with minimal foreground UI. The noise filter is a fixed recipe; changing seed or baseFrequency alters character if you fork the block.

Optional className on the section wrapper lets you align height or padding with surrounding layout.