The design platform for shader magic.

Join 14,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

Explore Shaders and see what's possible.

Start by learning and experimenting

Try the design editor
Explore and build in the design editor
Export preview code
Preview in your own project instantly
Upload your own assets
Bring your own images, video & logos
Community Discord
Get help from the community

Upgrade when you're ready to ship.

Core

$59/yr

Design and export code for production.

Everything you need to ship

Full design editor access
Design shaders on an infinite canvas
Export code for your framework
Vue, React, Svelte, Solid, Framer, JS
Render videos & images
High quality, no watermark
One-click install inside Framer
Import and publish in seconds
MCP for agentic workflows
Bring Shaders into your AI tools
Commercial use license
Use in client and commercial projects

Commercial use included.

Pro

Most Popular

$199/yr

For professionals who ship magic every day.

Everything in Core, plus...

750+ production-ready presets
Curated and constantly expanding
55+ ready-to-use website sections
Copy & paste prompts for your AI agent
Install presets with Shadcn CLI
One command, instant install
Exclusive Discord role & channel
Connect with pros and the team
Priority support
Get help when you need it
All future updates
New features, improvements, always

Commercial use included.