shader magic
for modern
frontends

The component library for creative
WebGPU effects in the browser

Explore all presets

Ship incredible backgrounds & creative effects in minutes

Hero sections, cards, logomarks, media effects and more.

Used by engineers at

VercelShopifyAdobeFramerMicrosoftSupabase
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
MCP Connector

Connect your agent. Watch it do magic.

Search presets, install with one command, and customize props — all from your AI agent, without leaving your terminal. Connects to any MCP-compatible agent in minutes.

Claude CodeCursorCodexWindsurfCopilotBoltLovablev0
MCP Docs
Shaders Pro MCP in Claude Code
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
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/>
<VHS/>
<Vibrance/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<WaveDistortion/>
<Weave/>
<WebcamTexture/>
<ZoomBlur/>
<Vesica/>
<VHS/>
<Vibrance/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<WaveDistortion/>
<Weave/>
<WebcamTexture/>
<ZoomBlur/>
<Vesica/>
<VHS/>
<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.

Free for personal & commercial use.

Guides Component Docs
Vue

Vue

Quickstart guide →

React

React

Quickstart guide →

Svelte

Svelte

Quickstart guide →

Solid

Solid

Quickstart guide →

JS

JS

Quickstart guide →

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.