VueReactSvelteSolidFramerJavaScript

Open source shader component library

Join 18,000+ design engineers crafting magic with our production-ready WebGPU components. Create your own effects in our free design editor.

Shaders design editor
Watch the demo (4m) →

Used by frontend teams at

VercelShopifyAdobeFramerMicrosoftSupabase

Stack 200+ components to create your own shader

Combine simple building blocks into extraordinary effects for your website

Browse components
GlassBackground.tsx
import { ... } from 'shaders/react'

export default function GlassBackground() {
  return (
    <Shader>
      {/* Ambient background */}
      <Swirl
        blend={50}
        detail={1.7}
        stops={["#e6e2ff", "#bdb2ff"]} />
      {/* Interactive cursor effect */}
      <ChromaFlow
        baseColor="#ae00ff"
        downColor="#4642ff"
        leftColor="#5900ff"
        rightColor="#5b4fff"
        upColor="#7105ff" />
      {/* Glass-like distortion */}
      <FlutedGlass
        aberration={0.25}
        angle={30}
        frequency={8}
        highlightColor="#ffffff"
        refraction={4}
        softness={0.5}/>
    </Shader>
  )
}
<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/>
<Satin/>
<Saturation/>
<Scratches/>
<Sharpness/>
<Shatter/>
<SimplexNoise/>
<SineWave/>
<SliceWipe/>
<Smoke/>
<SmokeFill/>
<SmokeFlow/>
<Solarize/>
<SolidColor/>
<Sparkle/>
<Spherize/>
<Spiral/>
<Star/>
<Stone/>
<RippleWipe/>
<RoundedRect/>
<Satin/>
<Saturation/>
<Scratches/>
<Sharpness/>
<Shatter/>
<SimplexNoise/>
<SineWave/>
<SliceWipe/>
<Smoke/>
<SmokeFill/>
<SmokeFlow/>
<Solarize/>
<SolidColor/>
<Sparkle/>
<Spherize/>
<Spiral/>
<Star/>
<Stone/>
<RippleWipe/>
<RoundedRect/>
<Satin/>
<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/>
<Strands/>
<Stretch/>
<Stripes/>
<StudioBackground/>
<SunBurst/>
<Surface3D/>
<Swirl/>
<Teardrop/>
<Text/>
<ThinFilm/>
<TiltShift/>
<TimeTrail/>
<Tint/>
<Trapezoid/>
<TriangularGrid/>
<Tritone/>
<Truchet/>
<Twirl/>
<VenetianBlinds/>
<Vesica/>
<Strands/>
<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/>
<VHS/>
<Vibrance/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<Voxels/>
<Water/>
<Watercolor/>
<WaveDistortion/>
<Waveform/>
<WaveletNoise/>
<Weave/>
<WebcamTexture/>
<Wool/>
<WorleyNoise/>
<ZoomBlur/>
<VHS/>
<Vibrance/>
<VideoTexture/>
<Vignette/>
<Voronoi/>
<Voxels/>
<Water/>
<Watercolor/>
<WaveDistortion/>
<Waveform/>
<WaveletNoise/>
<Weave/>
<WebcamTexture/>
<Wool/>
<WorleyNoise/>
<ZoomBlur/>

1,000+ pro shaders, new drops weekly

Unlock our best shader components for only $10/month

Unlock Shaders Pro

Design in a visual editor. Export to code for free.

Endless combinations of looks

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

Turn your own assets into shaders

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

Interactivity built-in

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

Design on an infinite canvas

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 the shader library, install components, and keep them in sync with the design editor.

Claude CodeCursorCodexWindsurfCopilotBolt
MCP Docs CLI Docs
Shaders MCP in Claude Code
Search results for shaders

Find the perfect shader

Describe the look you want. Your agent searches the shader 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.

What developers say about Shaders

18,000+

design engineers crafting magic with production-ready WebGPU components.

“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 BosWes BosSyntax
“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.”
SerKoSerKoVue 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 RichardHugo RichardNuxt / Vercel
Featured this week
Hex Scan1 variant · Backgrounds
Open

PRO

1,000 pro shaders,
new drops weekly

Unlock our extensive library of pro shader components, copy-and-paste section prompts for your agent, and every new drop.

Unlock Pro See what's new →