VueReactSvelteSolidFramerJavaScript

The design platform for shader magic.

Join 15,000+ design engineers crafting shaders for the web with our production-ready components, presets, and design editor.

Shaders design editor
Watch the demo (4m) →

Used by frontend teams at

VercelShopifyAdobeFramerMicrosoftSupabase

Design stunning interactive shaders using components

No more hand-rolling WGSL code. Build on top of pre-made shader components. Performance-optimized by default.

<AngularBlur/>
<Arc/>
<Ascii/>
<Aurora/>
<BarnDoors/>
<BarShift/>
<Beam/>
<Bend/>
<Blob/>
<BlockDissolve/>
<BlockNoise/>
<BlueNoise/>
<Blur/>
<Boids/>
<BokehBlur/>
<BrickPattern/>
<BrightnessContrast/>
<BrushedMetal/>
<Bulge/>
<CarbonFiber/>
<AngularBlur/>
<Arc/>
<Ascii/>
<Aurora/>
<BarnDoors/>
<BarShift/>
<Beam/>
<Bend/>
<Blob/>
<BlockDissolve/>
<BlockNoise/>
<BlueNoise/>
<Blur/>
<Boids/>
<BokehBlur/>
<BrickPattern/>
<BrightnessContrast/>
<BrushedMetal/>
<Bulge/>
<CarbonFiber/>
<AngularBlur/>
<Arc/>
<Ascii/>
<Aurora/>
<BarnDoors/>
<BarShift/>
<Beam/>
<Bend/>
<Blob/>
<BlockDissolve/>
<BlockNoise/>
<BlueNoise/>
<Blur/>
<Boids/>
<BokehBlur/>
<BrickPattern/>
<BrightnessContrast/>
<BrushedMetal/>
<Bulge/>
<CarbonFiber/>
<Chalkboard/>
<ChannelBlur/>
<Checkerboard/>
<CheckerWipe/>
<Chevron/>
<ChromaFlow/>
<ChromaticAberration/>
<Chrome/>
<Circle/>
<ColorWheel/>
<CompressionArtifacts/>
<ConcentricSpin/>
<ConicGradient/>
<ContourLines/>
<CornerPin/>
<Crescent/>
<Cross/>
<CRTScreen/>
<Crystal/>
<CurlNoise/>
<Chalkboard/>
<ChannelBlur/>
<Checkerboard/>
<CheckerWipe/>
<Chevron/>
<ChromaFlow/>
<ChromaticAberration/>
<Chrome/>
<Circle/>
<ColorWheel/>
<CompressionArtifacts/>
<ConcentricSpin/>
<ConicGradient/>
<ContourLines/>
<CornerPin/>
<Crescent/>
<Cross/>
<CRTScreen/>
<Crystal/>
<CurlNoise/>
<Chalkboard/>
<ChannelBlur/>
<Checkerboard/>
<CheckerWipe/>
<Chevron/>
<ChromaFlow/>
<ChromaticAberration/>
<Chrome/>
<Circle/>
<ColorWheel/>
<CompressionArtifacts/>
<ConcentricSpin/>
<ConicGradient/>
<ContourLines/>
<CornerPin/>
<Crescent/>
<Cross/>
<CRTScreen/>
<Crystal/>
<CurlNoise/>
<CursorRipples/>
<CursorTrail/>
<DataMosh/>
<DiamondGradient/>
<DiamondWipe/>
<DiffuseBlur/>
<DisplacementMap/>
<Dither/>
<DotGrid/>
<DropShadow/>
<Duotone/>
<Ellipse/>
<Emboss/>
<Engraving/>
<ErosionNoise/>
<Exposure/>
<FallingLines/>
<FilmGrain/>
<FilmStock/>
<Flip/>
<CursorRipples/>
<CursorTrail/>
<DataMosh/>
<DiamondGradient/>
<DiamondWipe/>
<DiffuseBlur/>
<DisplacementMap/>
<Dither/>
<DotGrid/>
<DropShadow/>
<Duotone/>
<Ellipse/>
<Emboss/>
<Engraving/>
<ErosionNoise/>
<Exposure/>
<FallingLines/>
<FilmGrain/>
<FilmStock/>
<Flip/>
<CursorRipples/>
<CursorTrail/>
<DataMosh/>
<DiamondGradient/>
<DiamondWipe/>
<DiffuseBlur/>
<DisplacementMap/>
<Dither/>
<DotGrid/>
<DropShadow/>
<Duotone/>
<Ellipse/>
<Emboss/>
<Engraving/>
<ErosionNoise/>
<Exposure/>
<FallingLines/>
<FilmGrain/>
<FilmStock/>
<Flip/>
<FloatingParticles/>
<Flower/>
<FlowField/>
<FlowingGradient/>
<FlutedGlass/>
<Fog/>
<Form3D/>
<FractalNoise/>
<Frost/>
<GaborNoise/>
<Glass/>
<GlassTiles/>
<Glitch/>
<Glow/>
<Godrays/>
<Goo/>
<GradientMap/>
<Grid/>
<GridDistortion/>
<Halftone/>
<FloatingParticles/>
<Flower/>
<FlowField/>
<FlowingGradient/>
<FlutedGlass/>
<Fog/>
<Form3D/>
<FractalNoise/>
<Frost/>
<GaborNoise/>
<Glass/>
<GlassTiles/>
<Glitch/>
<Glow/>
<Godrays/>
<Goo/>
<GradientMap/>
<Grid/>
<GridDistortion/>
<Halftone/>
<FloatingParticles/>
<Flower/>
<FlowField/>
<FlowingGradient/>
<FlutedGlass/>
<Fog/>
<Form3D/>
<FractalNoise/>
<Frost/>
<GaborNoise/>
<Glass/>
<GlassTiles/>
<Glitch/>
<Glow/>
<Godrays/>
<Goo/>
<GradientMap/>
<Grid/>
<GridDistortion/>
<Halftone/>
<Heart/>
<Heatmap/>
<HexGrid/>
<Hologram/>
<Holographic/>
<HueShift/>
<ImageTexture/>
<InkFlow/>
<IrisWipe/>
<Irradiance/>
<IsometricCubes/>
<Kaleidoscope/>
<KeyFrames/>
<LensDistortion/>
<LensFlare/>
<LightEdge/>
<LightLeak/>
<Line/>
<LinearBlur/>
<LinearGradient/>
<Heart/>
<Heatmap/>
<HexGrid/>
<Hologram/>
<Holographic/>
<HueShift/>
<ImageTexture/>
<InkFlow/>
<IrisWipe/>
<Irradiance/>
<IsometricCubes/>
<Kaleidoscope/>
<KeyFrames/>
<LensDistortion/>
<LensFlare/>
<LightEdge/>
<LightLeak/>
<Line/>
<LinearBlur/>
<LinearGradient/>
<Heart/>
<Heatmap/>
<HexGrid/>
<Hologram/>
<Holographic/>
<HueShift/>
<ImageTexture/>
<InkFlow/>
<IrisWipe/>
<Irradiance/>
<IsometricCubes/>
<Kaleidoscope/>
<KeyFrames/>
<LensDistortion/>
<LensFlare/>
<LightEdge/>
<LightLeak/>
<Line/>
<LinearBlur/>
<LinearGradient/>
<LinearWipe/>
<LiquidMetal/>
<Liquify/>
<MagneticFilings/>
<Marble/>
<MeshGradient/>
<Mirror/>
<MultiPointGradient/>
<Nebula/>
<Neon/>
<NoiseDissolve/>
<ObjectTracker/>
<Obsidian/>
<PagePeel/>
<Paper/>
<Parallelogram/>
<ParticleField/>
<ParticleFlow/>
<Particles/>
<PerlinNoise/>
<LinearWipe/>
<LiquidMetal/>
<Liquify/>
<MagneticFilings/>
<Marble/>
<MeshGradient/>
<Mirror/>
<MultiPointGradient/>
<Nebula/>
<Neon/>
<NoiseDissolve/>
<ObjectTracker/>
<Obsidian/>
<PagePeel/>
<Paper/>
<Parallelogram/>
<ParticleField/>
<ParticleFlow/>
<Particles/>
<PerlinNoise/>
<LinearWipe/>
<LiquidMetal/>
<Liquify/>
<MagneticFilings/>
<Marble/>
<MeshGradient/>
<Mirror/>
<MultiPointGradient/>
<Nebula/>
<Neon/>
<NoiseDissolve/>
<ObjectTracker/>
<Obsidian/>
<PagePeel/>
<Paper/>
<Parallelogram/>
<ParticleField/>
<ParticleFlow/>
<Particles/>
<PerlinNoise/>
<Perspective/>
<Pixelate/>
<PixelSort/>
<PixelThrow/>
<Plasma/>
<Plastic/>
<PolarCoordinates/>
<Polygon/>
<Posterize/>
<Prism/>
<ProgressiveBlur/>
<RadialGradient/>
<RadialWipe/>
<RandomBars/>
<ReactionDiffusion/>
<RectangularCoordinates/>
<ReflectivePlane/>
<Repeater/>
<Ring/>
<Ripples/>
<Perspective/>
<Pixelate/>
<PixelSort/>
<PixelThrow/>
<Plasma/>
<Plastic/>
<PolarCoordinates/>
<Polygon/>
<Posterize/>
<Prism/>
<ProgressiveBlur/>
<RadialGradient/>
<RadialWipe/>
<RandomBars/>
<ReactionDiffusion/>
<RectangularCoordinates/>
<ReflectivePlane/>
<Repeater/>
<Ring/>
<Ripples/>
<Perspective/>
<Pixelate/>
<PixelSort/>
<PixelThrow/>
<Plasma/>
<Plastic/>
<PolarCoordinates/>
<Polygon/>
<Posterize/>
<Prism/>
<ProgressiveBlur/>
<RadialGradient/>
<RadialWipe/>
<RandomBars/>
<ReactionDiffusion/>
<RectangularCoordinates/>
<ReflectivePlane/>
<Repeater/>
<Ring/>
<Ripples/>
<RippleWipe/>
<RoundedRect/>
<Saturation/>
<Scratches/>
<Sharpness/>
<Shatter/>
<SimplexNoise/>
<SineWave/>
<SliceWipe/>
<Smoke/>
<SmokeFill/>
<SmokeFlow/>
<Solarize/>
<SolidColor/>
<Spherize/>
<Spiral/>
<Star/>
<Stone/>
<Strands/>
<Stretch/>
<RippleWipe/>
<RoundedRect/>
<Saturation/>
<Scratches/>
<Sharpness/>
<Shatter/>
<SimplexNoise/>
<SineWave/>
<SliceWipe/>
<Smoke/>
<SmokeFill/>
<SmokeFlow/>
<Solarize/>
<SolidColor/>
<Spherize/>
<Spiral/>
<Star/>
<Stone/>
<Strands/>
<Stretch/>
<RippleWipe/>
<RoundedRect/>
<Saturation/>
<Scratches/>
<Sharpness/>
<Shatter/>
<SimplexNoise/>
<SineWave/>
<SliceWipe/>
<Smoke/>
<SmokeFill/>
<SmokeFlow/>
<Solarize/>
<SolidColor/>
<Spherize/>
<Spiral/>
<Star/>
<Stone/>
<Strands/>
<Stretch/>
<Stripes/>
<StudioBackground/>
<SunBurst/>
<Surface3D/>
<Swirl/>
<Teardrop/>
<Text/>
<ThinFilm/>
<TiltShift/>
<TimeTrail/>
<Tint/>
<Trapezoid/>
<TriangularGrid/>
<Tritone/>
<Truchet/>
<Twirl/>
<VenetianBlinds/>
<Vesica/>
<VHS/>
<Vibrance/>
<Stripes/>
<StudioBackground/>
<SunBurst/>
<Surface3D/>
<Swirl/>
<Teardrop/>
<Text/>
<ThinFilm/>
<TiltShift/>
<TimeTrail/>
<Tint/>
<Trapezoid/>
<TriangularGrid/>
<Tritone/>
<Truchet/>
<Twirl/>
<VenetianBlinds/>
<Vesica/>
<VHS/>
<Vibrance/>
<Stripes/>
<StudioBackground/>
<SunBurst/>
<Surface3D/>
<Swirl/>
<Teardrop/>
<Text/>
<ThinFilm/>
<TiltShift/>
<TimeTrail/>
<Tint/>
<Trapezoid/>
<TriangularGrid/>
<Tritone/>
<Truchet/>
<Twirl/>
<VenetianBlinds/>
<Vesica/>
<VHS/>
<Vibrance/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<Voxels/>
<Water/>
<Watercolor/>
<WaveDistortion/>
<Waveform/>
<WaveletNoise/>
<Weave/>
<WebcamTexture/>
<Wool/>
<WorleyNoise/>
<ZoomBlur/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<Voxels/>
<Water/>
<Watercolor/>
<WaveDistortion/>
<Waveform/>
<WaveletNoise/>
<Weave/>
<WebcamTexture/>
<Wool/>
<WorleyNoise/>
<ZoomBlur/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<Voxels/>
<Water/>
<Watercolor/>
<WaveDistortion/>
<Waveform/>
<WaveletNoise/>
<Weave/>
<WebcamTexture/>
<Wool/>
<WorleyNoise/>
<ZoomBlur/>

Choose from 200+ base components

Mix and match from a library of components. Stack, blend, mask, and transform layers to create unique effects without writing code.

Use your own assets to drive effects

Import your own images, videos, and SVG assets. Transform them into interactive shaders with advanced materials, filters and 3D effects.

Make it interactive

Drive any property with mouse movement, automatic animations, layer mapping, or reactive state from code.

Explore different directions

Layout multiple shaders on a single canvas. Compare variations side-by-side and explore concepts with just a few clicks.

Connect your agent for AI workflows

Search presets, install shaders, customize props, and wire to your application state

Claude CodeCursorCodexWindsurfCopilotBolt
Learn more
Shaders MCP in Claude Code

Unlock a library of 0 production-ready presets.

Explore presets

What developers say about Shaders

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

Pick a plan to start shipping

Free to build in the design editor. Upgrade when you're ready to ship to production.

Free

$0

Try the design editor and see what's possible.

Start by exploring

Try the design editor
Explore and build in the design editor
Export preview code
Preview in your own project instantly
Community Discord
Get help from the community

Free for personal use.

Pro

Most Popular · 2 months free

$199/yr

For professionals who ship magic every day.

When you're ready to ship

750+ production-ready presets
Curated and constantly expanding
55+ ready-to-use website sections
Copy & paste prompts for your AI agent
Full design editor access
Design shaders on an infinite canvas
Install presets with Shadcn CLI
One command, instant install
Export code for your framework
Vue, React, Svelte, Solid, Framer, JS
Exclusive Discord role & channel
Connect with pros and the team
Render videos & images
High quality, no watermark
Priority support
Get help when you need it
One-click install inside Framer
Import and publish in seconds
All future updates
New features, improvements, always
MCP for agentic workflows
Bring Shaders into your AI tools
Commercial use license
Unlimited sites and client projects

Commercial use included.

Lifetime

$399once

Same Pro, one payment

Pay once, never renew
No subscription, nothing to cancel
All future updates included
Every new preset, section and feature

Pay once. Own it.