Shaders Kit is a collection of 50 customizable shader effects, animated backgrounds, image filters, and visual effects made for Framer.
Create eye-catching animated shaders, interactive backgrounds, image effects, distortions, gradients, particles, patterns, lighting effects, and scroll-based visuals directly inside Framer.
50 shaders across 3 collections
Effects — 37 · Aurora, Bokeh, Caustics, Dithering, Dot Grid, Dot Orbit, God Rays, Grain Gradient, Kaleidoscope, Magma, Black Hole, Waves, Warp, Voronoi, Topography and more.
Filters — 10 · Apply stylized shader-based effects to your own images, including halftone, dithering, distortion, glitch, texture, dissolve and other creative image treatments.
Logo — 3 · Add animated and stylized shader effects to logos and graphic elements.
Still, Animated & Scroll
Use shaders as static visuals, turn them into animated effects, or create scroll-responsive experiences for hero sections, landing pages, portfolios, product showcases, backgrounds and experimental layouts.
Fully Customizable
Colors
Speed
Scale
Intensity
Noise
Distortion
Glow
Softness
Shapes
Lighting
Animation behavior
Layout and size
Preview your changes instantly and insert the finished effect directly into your Framer project.
Perfect for
Animated website backgrounds
Hero section effects
Creative landing pages
Interactive portfolios
Shader animations
Image filters
Abstract visuals
Grain and noise effects
Distortion and glitch effects
Liquid and fluid visuals
Particle effects
Scroll animations
Logo effects
Highlights
50 customizable shaders
37 visual effects
10 image filters
3 logo effects
Still mode
Animated mode
Scroll-based effects
Live customization controls
Custom colors and presets
Responsive output sizes
Insert directly into Framer
From subtle grain, noise and gradient effects to dramatic Magma, Black Hole, God Rays, Caustics and animated distortions, Shaders Kit gives you a fast way to create modern shader visuals without leaving Framer.
