Skip to main content
Paper Shaders is a collection of 28 GPU-accelerated WebGL shaders for React and vanilla JavaScript. Each shader is available as a React component from @paper-design/shaders-react or as a raw fragment shader string from @paper-design/shaders for use with ShaderMount.

Animated shaders

Mesh Gradient

A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion.

Static Mesh Gradient

Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls.

Static Radial Gradient

Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects.

Simplex Noise

A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual.

Grain Gradient

Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms.

Pulsing Border

Luminous trails of color merging into a glowing gradient frame.

Color Panels

Glowing translucent 3D panels rotating around a central axis.

Smoke Ring

Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic.

Neuro Noise

A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals.

Dot Orbit

Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls.

Dot Grid

Static grid pattern made of circles, diamonds, squares or triangles.

Metaballs

Up to 20 gooey blobs moving around the center and merging into smooth organic shapes.

Perlin Noise

Animated 3D Perlin noise with exposed controls.

Voronoi

Anti-aliased animated Voronoi pattern with smooth and customizable edges.

Waves

Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves.

Warp

Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors.

God Rays

Animated rays of light radiating from the center, blended with up to 5 colors.

Spiral

A single-colored animated spiral that morphs across a wide range of shapes.

Swirl

Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns.

Dithering

Animated 2-color dithering with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere).

Paper Texture

A static texture built from multiple noise layers, usable for realistic paper and cardboard surfaces or abstract patterns.

Image filters

Fluted Glass

Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity.

Water

Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image.

Image Dithering

A dithering image filter with support for 4 dithering modes and multiple color palettes.

Heatmap

A glowing gradient of colors flowing through an input image, creating a smoothly animated wave of intensity.

Liquid Metal

Futuristic liquid metal material applied to an uploaded logo or one of the pre-defined abstract shapes.

Halftone Dots

A halftone-dot image filter featuring customizable grids, color palettes, and dot styles.

Halftone CMYK

A halftone CMYK classic algorithm image filter.

Build docs developers (and LLMs) love