shader magic
for modern
frontends

The component library for creative
WebGPU effects in the browser

Explore all presets

ship incredible backgrounds & effects in your codebase

design show-stopping hero sections, cards, logomarks and more...

Component Library
<AngularBlur/>
<Ascii/>
<Aurora/>
<Beam/>
<Blob/>
<Blur/>
<BrightnessContrast/>
<Bulge/>
<ChannelBlur/>
<Checkerboard/>
<AngularBlur/>
<Ascii/>
<Aurora/>
<Beam/>
<Blob/>
<Blur/>
<BrightnessContrast/>
<Bulge/>
<ChannelBlur/>
<Checkerboard/>
<AngularBlur/>
<Ascii/>
<Aurora/>
<Beam/>
<Blob/>
<Blur/>
<BrightnessContrast/>
<Bulge/>
<ChannelBlur/>
<Checkerboard/>
<ChromaFlow/>
<ChromaticAberration/>
<Circle/>
<ConcentricSpin/>
<ConicGradient/>
<ContourLines/>
<Crescent/>
<Cross/>
<CRTScreen/>
<Crystal/>
<ChromaFlow/>
<ChromaticAberration/>
<Circle/>
<ConcentricSpin/>
<ConicGradient/>
<ContourLines/>
<Crescent/>
<Cross/>
<CRTScreen/>
<Crystal/>
<ChromaFlow/>
<ChromaticAberration/>
<Circle/>
<ConcentricSpin/>
<ConicGradient/>
<ContourLines/>
<Crescent/>
<Cross/>
<CRTScreen/>
<Crystal/>
<CursorRipples/>
<CursorTrail/>
<DiamondGradient/>
<DiffuseBlur/>
<Dither/>
<DotGrid/>
<DropShadow/>
<Duotone/>
<Ellipse/>
<Emboss/>
<CursorRipples/>
<CursorTrail/>
<DiamondGradient/>
<DiffuseBlur/>
<Dither/>
<DotGrid/>
<DropShadow/>
<Duotone/>
<Ellipse/>
<Emboss/>
<CursorRipples/>
<CursorTrail/>
<DiamondGradient/>
<DiffuseBlur/>
<Dither/>
<DotGrid/>
<DropShadow/>
<Duotone/>
<Ellipse/>
<Emboss/>
<FallingLines/>
<FilmGrain/>
<FloatingParticles/>
<Flower/>
<FlowField/>
<FlowingGradient/>
<Form3D/>
<Glass/>
<GlassTiles/>
<Glitch/>
<FallingLines/>
<FilmGrain/>
<FloatingParticles/>
<Flower/>
<FlowField/>
<FlowingGradient/>
<Form3D/>
<Glass/>
<GlassTiles/>
<Glitch/>
<FallingLines/>
<FilmGrain/>
<FloatingParticles/>
<Flower/>
<FlowField/>
<FlowingGradient/>
<Form3D/>
<Glass/>
<GlassTiles/>
<Glitch/>
<Glow/>
<Godrays/>
<Grid/>
<GridDistortion/>
<Halftone/>
<HexGrid/>
<HueShift/>
<ImageTexture/>
<Kaleidoscope/>
<LensFlare/>
<Glow/>
<Godrays/>
<Grid/>
<GridDistortion/>
<Halftone/>
<HexGrid/>
<HueShift/>
<ImageTexture/>
<Kaleidoscope/>
<LensFlare/>
<Glow/>
<Godrays/>
<Grid/>
<GridDistortion/>
<Halftone/>
<HexGrid/>
<HueShift/>
<ImageTexture/>
<Kaleidoscope/>
<LensFlare/>
<LinearBlur/>
<LinearGradient/>
<Liquify/>
<Mirror/>
<MultiPointGradient/>
<Neon/>
<Paper/>
<Perspective/>
<Pixelate/>
<Plasma/>
<LinearBlur/>
<LinearGradient/>
<Liquify/>
<Mirror/>
<MultiPointGradient/>
<Neon/>
<Paper/>
<Perspective/>
<Pixelate/>
<Plasma/>
<LinearBlur/>
<LinearGradient/>
<Liquify/>
<Mirror/>
<MultiPointGradient/>
<Neon/>
<Paper/>
<Perspective/>
<Pixelate/>
<Plasma/>
<PolarCoordinates/>
<Polygon/>
<Posterize/>
<ProgressiveBlur/>
<RadialGradient/>
<RectangularCoordinates/>
<Ring/>
<Ripples/>
<RoundedRect/>
<Saturation/>
<PolarCoordinates/>
<Polygon/>
<Posterize/>
<ProgressiveBlur/>
<RadialGradient/>
<RectangularCoordinates/>
<Ring/>
<Ripples/>
<RoundedRect/>
<Saturation/>
<PolarCoordinates/>
<Polygon/>
<Posterize/>
<ProgressiveBlur/>
<RadialGradient/>
<RectangularCoordinates/>
<Ring/>
<Ripples/>
<RoundedRect/>
<Saturation/>
<Sharpness/>
<Shatter/>
<SimplexNoise/>
<SineWave/>
<Solarize/>
<SolidColor/>
<Spherize/>
<Spiral/>
<Star/>
<Strands/>
<Sharpness/>
<Shatter/>
<SimplexNoise/>
<SineWave/>
<Solarize/>
<SolidColor/>
<Spherize/>
<Spiral/>
<Star/>
<Strands/>
<Sharpness/>
<Shatter/>
<SimplexNoise/>
<SineWave/>
<Solarize/>
<SolidColor/>
<Spherize/>
<Spiral/>
<Star/>
<Strands/>
<Stretch/>
<Stripes/>
<StudioBackground/>
<Swirl/>
<TiltShift/>
<Tint/>
<Trapezoid/>
<Tritone/>
<Truchet/>
<Twirl/>
<Stretch/>
<Stripes/>
<StudioBackground/>
<Swirl/>
<TiltShift/>
<Tint/>
<Trapezoid/>
<Tritone/>
<Truchet/>
<Twirl/>
<Stretch/>
<Stripes/>
<StudioBackground/>
<Swirl/>
<TiltShift/>
<Tint/>
<Trapezoid/>
<Tritone/>
<Truchet/>
<Twirl/>
<Vesica/>
<Vibrance/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<WaveDistortion/>
<Weave/>
<WebcamTexture/>
<ZoomBlur/>
<Vesica/>
<Vibrance/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<WaveDistortion/>
<Weave/>
<WebcamTexture/>
<ZoomBlur/>
<Vesica/>
<Vibrance/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<WaveDistortion/>
<Weave/>
<WebcamTexture/>
<ZoomBlur/>

Mix and match from 100+ base components.

Stack, nest, mask and blend to create endlessly customizable effects in familiar component structure.

Guides Component Docs
Vue

Vue

Quickstart guide →

React

React

Quickstart guide →

Svelte

Svelte

Quickstart guide →

Solid

Solid

Quickstart guide →

JS

JS

Quickstart guide →

Design Editor

Design visually.
Copy & paste code.

Create effects in the design editor, then export clean, production-ready code for your framework of choice.

Editor BackgroundShader Editor Interface
Pro Presets

Find your perfect shader with 0 Pro presets.

Explore 0 hand-crafted collections — ready to drop into any project, available with Shaders Pro.

Explore all presets
MCP Connector

Connect your agent and let it do the work.

Connect any MCP-compatible agent to Shaders Pro. Search presets, one-click install, and customize props directly from your terminal. Your agent is now bad-ass.

Claude CodeCursorCodexWindsurfCopilotBoltLovablev0
MCP Docs
Shaders Pro MCP in Claude Code

Used by the talented people at

VercelShopifyAdobeFramerMicrosoftSupabase

When anyone can crank out a decent looking page, shaders is what will take your designs to the next level. This is a fantastic tool to help you turn your creativity into those experiences.

Wes Bos
Wes Bos
Syntax

"Shaders significantly lowers the barrier to creating web shader animations, making it possible to design fancy, interactive visuals in seconds. Highly recommended for all frontend developers and design engineers."

SerKo
SerKo
Vue Language Tools

"The project is incredibly smooth and easy to work with! It's just amazing how, with very little effort, you can add things that have a stunning visual effect!"

Hugo Richard
Hugo Richard
Nuxt / Vercel

Frequently asked questions

Everything you need to know before getting started with Shaders. For more detailed guides, check out our full documentation.