01
GPU rendered
Real-time WebGL preview at interactive frame rates.
Visual shader tool · no GLSL required
Shader gradients,without the code.
Create animated WebGL backgrounds with the depth and motion of custom fragment shaders—using visual controls built for designers.
Open the shader editorShader, translated
A pixel-by-pixel instrument.
A fragment shader calculates the color of every pixel on your canvas. Because that work happens in parallel on the GPU, shader gradients can bend space, create procedural texture, mimic reflective materials, and move smoothly in real time.
GradientLab turns those shader inputs into an approachable design system: color stops, spatial warps, surface materials, post-processing, and animation controls. You shape the result visually while WebGL handles the rendering underneath.
Fragment shaderWebGLProcedural colorGPU animation
02
Layer effects
Combine gradient types, warps, geometry, and materials.
03
Built for motion
Animate parameters and create loops without a timeline maze.
04
Production export
Render PNG, JPG, WebP, GIF, MP4, or WebM up to 4K.
From blank canvas to export
Make an animated shader background in three moves.
- 01
Choose the field
Start with Aurora, Spiral, Folded, Reverb, or a classic gradient type. Add your colors and position each stop.
- 02
Shape the shader
Add wave, twist, sphere, geometry, grain, glow, or a material simulation. Every change renders immediately.
- 03
Animate and export
Choose a motion preset, tune the loop, and export a finished background as an image or video asset.
CSS gradient
Excellent for clean, static transitions.
CSS gradients are lightweight and ideal for simple linear, radial, and conic fills. They are the right tool when the visual should stay flat and implementation should remain in CSS.
Shader gradient
Built for depth, distortion, texture, and motion.
Choose a WebGL shader when you need organic movement, stacked effects, material-like light, or a cinematic video loop that would be awkward to reproduce with CSS alone.
See how WebGL rendering worksChoose your workflow
Questions, answered
Shader gradient FAQ
What is a shader gradient?
A shader gradient is a color field calculated by a small GPU program, usually a fragment shader. Unlike a static CSS gradient, it can distort coordinates, simulate materials, respond to time, and render fluid motion in real time.
Do I need to know GLSL to make one?
No. GradientLab exposes shader parameters as visual controls, so you can shape color, motion, warps, geometry, and materials without writing shader code.
Can I export an animated shader background?
Yes. You can export an animated result as MP4, WebM, or GIF, including seamless loops and resolutions up to 4K on the Pro plan. Still exports include PNG, JPG, and WebP.
Does GradientLab export GLSL source code?
Not currently. GradientLab is a visual shader gradient generator for creating and exporting finished design assets and shareable WebGL gradients, rather than a GLSL code editor.