Introducing v3 — a new editor, faster engine, and more.

See what's new

The design platform for web shaders

Shaders makes it easy to ship creative frontend effects with an extensive component library and pro-grade design editor

Used by 10K+ design engineers
Shaders design editor
Watch the demo (4m) →

Your toolkit to ship magic, without writing shader code.

Make a strong first impression with interactive shaders that "wow" users

Used by frontend teams at

VercelShopifyAdobeFramerMicrosoftSupabase

Meet the new design editor

Design, compose, and ship production-ready shaders

Choose from 180+ 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 to deploy in seconds

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

Claude CodeCursorCodexWindsurfCopilotBolt
Learn more
Shaders Pro MCP in Claude Code

Preset library

Explore 0 presets to kick-start your designs

Explore presets

Export code for your framework of choice

Export clean component code that fits naturally into your existing application.

Vue

Vue

Quickstart guide →

React

React

Quickstart guide →

Svelte

Svelte

Quickstart guide →

Solid

Solid

Quickstart guide →

JS

JS

Quickstart guide →

Framer

Framer

Get the plugin →

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

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