Blocks · Backgrounds

Backgrounds

Decorative background patterns — grids, dots, beams, particles, light rays. Drop into hero or feature sections.

Cosmic backdrops

Galactic Vortex

bg-cosmic-1

Full-page rotating conic-gradient vortex; content reads via dark scrim.

Open block

Meteor Shower

bg-cosmic-2

Diagonal meteor particles drift across a dark sky behind centered content.

Open block

Aurora Drift

bg-cosmic-3

Multi-radial aurora gradient with slow drift and hue-rotate.

Open block

Grid Beams

bg-cosmic-4

Vertical light-beam scans across a retro grid with a center spotlight pool.

Open block

Dot Field

bg-cosmic-5

Animated dotted-grid with breathing scale variations.

Open block

Particles

bg-cosmic-6

Ambient floating particles drift across the canvas at multiple depths.

Open block

Reactive & animated

Animated Noise

bg-animated-noise

SVG feTurbulence with animated seed over a gradient base.

Open block

Code Rain

bg-code-rain

Matrix-style falling code rain — accent-tinted mono glyphs at varied speeds.

Open block

Cursor Mesh

bg-cursor-mesh

Three layered radial blobs that track the pointer over a slow drift.

Open block

Dot Grid Spotlight

bg-dot-grid-spotlight

Dot grid with a cursor-following spotlight via radial mask.

Open block

Meteor Shower

bg-meteor-shower

Diagonal meteor streaks, top-left to bottom-right.

Open block

Paper Grain

bg-paper-grain

Calm animated paper-grain noise — feTurbulence with low opacity.

Open block

Particle Field

bg-particle-field

40 absolutely-positioned dots with staggered keyframe motion.

Open block

Scroll Aurora

bg-scroll-aurora

Aurora curtain that drifts and shifts hue with --lsd-progress.

Open block

Effect library

Animated Beam

animated-beam

SVG beam that traces between two anchored points.

Open block

Animated Grid Pattern

animated-grid-pattern

Grid cells that light up in a wandering wave.

Open block

Border Beam

border-beam

Glowing beam runs along the inside edge of a container.

Open block

Confetti

confetti

Burst of celebratory shapes; one-shot or repeatable.

Open block

Cool Mode

cool-mode

Click anywhere — particles spray from the pointer.

Open block

Flickering Grid

flickering-grid

Square grid with random per-cell flicker.

Open block

Grid Beams

grid-beams

Vertical light beams sliding across a base grid.

Open block

Interactive Grid Pattern

interactive-grid-pattern

Pointer hover lights up the nearest grid cells.

Open block

Meteors

meteors

Compact meteor-rain effect for cards and small panels.

Open block

Particles

particles

Canvas-driven particle field, density and speed tunable.

Open block

Progressive Blur

progressive-blur

Gradient-masked blur that fades along an axis.

Open block

Retro Grid

retro-grid

Perspective horizon grid, Tron / synthwave style.

Open block

Ripple

ripple

Concentric rings expand and fade from a center point.

Open block

Warp Background

warp-background

Animated warp grid bending toward a vanishing point.

Open block

Static patterns

Dot Pattern

dot-pattern

Tiled dot grid — calm structural backdrop.

Open block

Grid Pattern

grid-pattern

Pure CSS line grid for surface texture.

Open block

Striped Pattern

striped-pattern

Diagonal repeating stripes — barber-pole calm.

Open block