Figma plugin liveInstall
Animated shader gradient with metallic color and dimensional light

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 editor

Shader, 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
01

GPU rendered

Real-time WebGL preview at interactive frame rates.

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.

  1. 01

    Choose the field

    Start with Aurora, Spiral, Folded, Reverb, or a classic gradient type. Add your colors and position each stop.

  2. 02

    Shape the shader

    Add wave, twist, sphere, geometry, grain, glow, or a material simulation. Every change renders immediately.

  3. 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 works

Choose your workflow

CSS vs WebGL gradients

Compare CSS, live shaders, and exported video to choose the right format for your project.

Make an animated website background

Plan the composition, check the loop, and deliver motion with a poster and reduced-motion fallback.

Follow a real recipe: Make Metal Joy with Bend, Wave, Ripple and Glow.

Ready to export? Compare PNG, JPG, WebP, MP4, WebM, and GIF.

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. Pro supports MP4, WebM, and GIF animation exports, with video up to 3840 × 2160. Still exports include PNG, JPG, and WebP; Free is limited to watermarked PNG. Preview the loop seam before publishing: not every effect combination repeats seamlessly.

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.

Create a shader gradient Explore video exportRead the documentation