Documentation
Everything you need to know about creating stunning gradients, animations, and effects.
Overview
GradientLab is a professional-grade gradient creation and animation tool built with WebGL shaders for real-time, GPU-accelerated rendering. Create stunning, customizable gradients with advanced effects, animations, and export capabilities.
9 Gradient Types
From classic linear to advanced aurora, spiral, and reverb effects
Real-time Preview
WebGL-powered 60fps rendering for instant feedback
Export Anywhere
PNG, JPG, WebP, GIF, MP4, WebM up to 4K resolution
Gradient Types
9 gradient types—4 standard and 5 advanced—all rendered with custom WebGL shaders.
Standard Types
Linear
Classic directional gradient with angle, offset, scale, and repeat modes
Radial
Circular from center with shape variants (circle, squircle, pill)
Conic
Sweep around a point with arc and repeat controls
Diamond
Diamond-shaped with rotation and blend styles
Advanced Types
Spiral
Spiraling pattern with tightness, decay, and arm width
Aurora
Northern lights ribbon effect with wave count and flow
Stripes
Striped pattern with sharpness and fade controls
Folded
Paper fold effect with accordion, waves, or zigzag styles
Reverb
Echo shapes: circle, square, star, heart, and more
Color System
Color Stops
Add up to 10 color stops to your gradient with precise positioning.
- Click anywhere on the gradient bar to add a new stop
- Drag pins to reposition (0-100%)
- HSL color wheel with hex input
- Reverse gradient with one click
Color Extraction
Extract color palettes from any image automatically.
- Drag & drop or click to upload
- Intelligent color extraction
- Click colors to copy hex values
- Apply extracted palette instantly
Blend Options
Control how colors transition between stops.
| Option | Description |
|---|---|
| Hard Stops | Sharp transitions between colors (no blending) |
| Steps | Stepped/posterized transitions (2-20 steps) |
| Easing | Transition curve: Linear, Ease In/Out, Bounce |
| Hue Path | Short (direct) or Long (around the color wheel) |
Warp Effects
7 spatial distortion effects that modify the gradient's shape. All warps can be combined, animated, and muted together.
Wave
Sinusoidal wave distortion
Amplitude, Frequency, Direction, Rotation
Bend
Curved perspective effect
Amount, Axis, Pinch
Ripple
Concentric ring distortion
Amplitude, Frequency, Center, Decay
Twist
Rotational spiral effect
Amount (-360° to 360°), Radius, Center
Sphere
Fisheye/barrel distortion
Amount, Radius, Center
Bulge
Push/pull from a point
Amount, Radius, Center
Blur
Gaussian blur effect (0-100)
Visual Effects
Post-processing effects applied after the gradient is rendered.
Color Adjustments
| Control | Range | Description |
|---|---|---|
| Brightness | -100 to +100 | Lighten or darken the image |
| Contrast | -100 to +100 | Increase or decrease tonal range |
| Saturation | -100 to +100 | Boost or reduce color intensity |
| Hue Shift | 0-360° | Rotate all colors around the wheel |
Stylistic Effects
| Effect | Description | Controls |
|---|---|---|
| Glow | Soft bloom/light bleeding | Amount, Threshold, Radius |
| Chromatic Aberration | RGB color channel split | Amount, Angle |
| Vignette | Darkened/lightened edges | Amount, Softness, Roundness, Invert |
| Grain | Film grain texture | Amount, Size, Mono toggle |
| Dither | Banding reduction | Amount |
Retro Effects
| Effect | Description | Controls |
|---|---|---|
| Posterize | Reduce color levels | Levels (2-32) |
| Halftone | Print-style dot pattern | Intensity, Scale, Softness |
| Scanlines | CRT/TV scanlines | Intensity, Density |
| Pixelate | Retro pixel mosaic | Size |
Geometry Effects
Structural modifications that affect the gradient's spatial layout with mesh deformation capabilities.
Grid Refraction
Glass tile effect
- Tiles X/Y (2-20)
- Refraction per tile
- Mesh deformation: bulge, skew, perspective, curve, wave, twist
Columns
Louvered window effect
- Column count (3-30)
- Offset displacement
- Patterns: Alternating, Progressive, Wave
3D Depth
Dimensional bulge/curve effect
- Surface types: Sphere, Cylinder, Saddle
- Center position & falloff
- Surface wave displacement
- Light/shadow shading
Materials
Surface material simulations that add realistic textures with Photoshop-style blend modes.
Iridescent
Rainbow oil-slick shimmer
Intensity, Scale, Shift
Metallic
Brushed metal surface
Intensity, Highlight, Contrast
Holographic
Prismatic line diffraction
Intensity, Density, Angle
Velvet
Soft edge luminosity
Intensity, Depth, Glow
Blend Modes
Normal, Screen, Overlay, Multiply, Soft Light, Hard Light, Color Dodge, Color Burn, Lighten, Darken
Animation System
Powerful GSAP-powered animation engine for creating motion graphics with configurable presets.
Animation Presets
Breathe
Slow, organic expansion
Drift
Gentle wandering
Pulse
Rhythmic punch
Sway
Pendulum motion
Flow
Continuous orbit
Lava
Morphing blobs
Controls
Global
- Intensity: 10-500% (Whisper → EXTREME)
- Loop Duration: 2-60 seconds
Rotation
- Amount: 0-360°
- Speed: 0.25x - 3x
- Mode: Oscillate or Continuous
Scale
- Amount: 0-100%
- Speed: 0.25x - 3x
- Mode: Breathe (smooth) or Punch (snappy)
Movement
- Amount: 0-100
- Speed: 0.25x - 3x
- Pattern: Drift, Orbit, Pendulum
3D Depth
- Amount, Speed, Pattern (Breathe/Pulse/Wave)
- Center Movement & Pattern (Still/Drift/Orbit/Wander)
- Surface Wave displacement
Feel (Easing)
- Smooth: Sine ease
- Snappy: Exponential
- Linear: Constant speed
- Elastic: Bouncy overshoot
Per-Feature Influence
When warps, materials, or effects are active, individual animation intensity sliders appear for fine-tuned control: Bend, Wave, Ripple, Twist, Bulge, Iridescent, Metallic, Holographic, Glow, Vignette, Chromatic, Grain, Depth.
Randomizer
AI-assisted gradient generation with mood-based presets and color theory harmonies.
Mood Presets
Calm
Soft, peaceful
Electric
High energy
Sunset
Warm colors
Ocean
Deep blues
Neon
Cyberpunk vibes
Earth
Organic tones
Cosmic
Mysterious
Minimal
Clean, simple
Color Harmonies
Complementary
2 colors, opposite on wheel
Analogous
3-4 colors, adjacent on wheel
Triadic
3 colors, evenly spaced
Split-Complementary
One + two adjacent to complement
Tetradic
4 colors, two complementary pairs
Monochromatic
Single hue, varying lightness
Export Options
Format Comparison
| Format | Free | Pro |
|---|---|---|
| PNG | 800×600 max, watermarked | 4K (4096×4096), no watermark |
| JPG | ❌ | ✅ Up to 4K |
| WebP | ❌ | ✅ Up to 4K |
| GIF (Animated) | ❌ | ✅ |
| MP4 (Video) | ❌ | ✅ |
| WebM (Video) | ❌ | ✅ |
Export Settings
- Resolution presets: Canvas Size, 1080p, 4K, Instagram, Twitter, etc.
- Custom dimensions with scale factor (1x-4x)
- Animation duration: 1-30 seconds
- Frame rate: 24, 30, or 60 fps
- Quality: Low, Medium, High, Max
Library & Collections
View Modes
- Grid — Standard card layout
- Masonry — Pinterest-style staggered layout
- Cinematic — Large preview cards
- Scatter — Artistic random layout
- Infinite Canvas — 3D pan/zoom/fly-through
Organization
- Unlimited collections
- Add gradients to multiple collections
- Favorites
- Search by name
- Sort by date, name, views
Keyboard Shortcuts
Free vs Pro
| Feature | Free | Pro |
|---|---|---|
| All 9 Gradient Types | ✅ | ✅ |
| All Effects & Materials | ✅ | ✅ |
| All Animations | ✅ | ✅ |
| Randomizer | ✅ | ✅ |
| Image Color Extraction | ✅ | ✅ |
| Collections & Sharing | ✅ | ✅ |
| Saved Gradients | 10 | Unlimited |
| PNG Export | 800×600 max | 4K (4096×4096) |
| JPG/WebP Export | ❌ | ✅ |
| GIF/MP4/WebM Export | ❌ | ✅ |
| Watermark | Yes | No |
Pro Pricing
Cancel monthly anytime. Lifetime = one-time payment, forever access.
Need help? Email us at hello@ppds.studio