🔥   Shaders is now open source

Read the announcement
VueReactSvelteSolidFramerJavaScript

The design platform for shader magic.

Join 16,000+ design engineers crafting shaders for the web with our open-source components and design editor.

Shaders design editor
Watch the demo (4m) →

Used by frontend teams at

VercelShopifyAdobeFramerMicrosoftSupabase

Design stunning interactive shaders using components

Build by mixing-and-matching open-source 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/>
<Sparkle/>
<Spherize/>
<Spiral/>
<Star/>
<Stone/>
<Strands/>
<RippleWipe/>
<RoundedRect/>
<Saturation/>
<Scratches/>
<Sharpness/>
<Shatter/>
<SimplexNoise/>
<SineWave/>
<SliceWipe/>
<Smoke/>
<SmokeFill/>
<SmokeFlow/>
<Solarize/>
<SolidColor/>
<Sparkle/>
<Spherize/>
<Spiral/>
<Star/>
<Stone/>
<Strands/>
<RippleWipe/>
<RoundedRect/>
<Saturation/>
<Scratches/>
<Sharpness/>
<Shatter/>
<SimplexNoise/>
<SineWave/>
<SliceWipe/>
<Smoke/>
<SmokeFill/>
<SmokeFlow/>
<Solarize/>
<SolidColor/>
<Sparkle/>
<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/>
<Stretch/>
<Stripes/>
<StudioBackground/>
<SunBurst/>
<Surface3D/>
<Swirl/>
<Teardrop/>
<Text/>
<ThinFilm/>
<TiltShift/>
<TimeTrail/>
<Tint/>
<Trapezoid/>
<TriangularGrid/>
<Tritone/>
<Truchet/>
<Twirl/>
<VenetianBlinds/>
<Vesica/>
<VHS/>
<Stretch/>
<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/>
<Vibrance/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<Voxels/>
<Water/>
<Watercolor/>
<WaveDistortion/>
<Waveform/>
<WaveletNoise/>
<Weave/>
<WebcamTexture/>
<Wool/>
<WorleyNoise/>
<ZoomBlur/>
<Vibrance/>
<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.

Ship shader magic from your agent or terminal

Search presets, install shader components, and keep them in sync with the design editor.

Claude CodeCursorCodexWindsurfCopilotBolt
MCP Docs CLI Docs
Shaders MCP in Claude Code
Search results for shader presets

Find the perfect shader

Describe the look you want. Your agent searches the preset library, then installs and customizes the right shader in seconds.

SDF shape generated from an SVG file

Upgrade your brand assets

Adapt any shader to your content and design system, and turn your SVGs into shape effects.

Shader property connected to cursor movement

Make any prop interactive

Connect shader properties to mouse movement, scroll, motion timelines, or reactive state in your app.

Unlock a library of 0 production-ready presets.

Components are free. The curated library is Pro.

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

Unlock Pro to access the full preset and section libraries

Free

$0

Every open source component, the design editor, and code export.

Get started with shader magic

200+ components
Vue, React, Svelte, Solid, JS
Export from the Design Editor
Unlimited design and export
CLI + MCP workflows
Export code however you want
Personal or commercial
MIT licensed, fully open

Open source and free forever.

Pro

Most Popular

$199/yr

For professionals who ship magic every day.

Unlock the complete Pro library

750+ production-ready presets
Curated and constantly expanding
55+ ready-to-use website sections
Copy & paste prompts for your AI agent
Render HD videos & images
High quality, no watermark
Presets in Framer, the CLI and MCP
Install from the library wherever you build
Unlimited version history
Keep your work safe as you explore
Exclusive Discord role & channel
Connect with pros and the team
All future updates
New features, improvements, always
Priority support
Get help when you need it

Cancel anytime.