Documentation

Everything you need to know about using Gradients.design — from getting started to advanced techniques.

Getting Started

Open the Studio and choose a gradient mode from the top bar. Each mode is a separate rendering engine with its own controls and capabilities.

CSS
CSS gradients — linear, radial, conic, diamond, reflected, and repeating variants with optional animation toggle.
Mesh
Point-based color blending. Double-click the preview to add points, drag to reposition.
3D
Three.js rendered gradients with orbit camera, zoom, and perspective controls.
WebGL
GPU shader gradients with noise, distortion, and flow for organic results.
Metaball
Organic metaball shapes with per-ball colors and physics-based movement.
Blob
Smooth animated blob shapes with customizable complexity.
Layered
Blend multiple gradient layers using mix-blend modes.
Voronoi
Crystal/Voronoi cell patterns with adjustable cells and edge styling.
Shader FX
Advanced GLSL effects — glow, chromatic shift, iridescence, edge fade.
Orb
3D sphere gradients with Fresnel rim glow, gradient flow, and animated surfaces.

Controls Reference

Gradient

Type selector (linear, radial, conic, diamond, repeating, reflected), angle knob, spread, softness, and scale. Available in CSS mode.

Colors

Add up to 8 color stops with drag-to-reorder. Includes hue shift slider, reverse button, and palette browser for quick color schemes.

Color Space

Choose between RGB, HSL, OKLCH, OKLAB, LCH, LAB, and sRGB-linear interpolation. OKLCH produces the smoothest perceptual transitions.

Animation

10+ animation types (gradient-shift, rotation, color-wave, breathing, diagonal-flow, radial-pulse, zoom, slide, spin). Control duration, speed, easing, direction, and loop behavior.

Effects

Noise intensity, distortion amount, flow speed, grain overlay, and blur. Primary controls for WebGL and Mesh modes, but grain/blur/brightness/contrast apply to all modes.

Brightness & Contrast

Post-processing filters applied via CSS. Works across all rendering engines.

Canvas Size

Choose from presets (Desktop, Mobile, Social Media, Wallpaper) or set custom dimensions. The preview scales to show accurate proportions.

Camera

Orbit controls, zoom, perspective, and rotation. Available in 3D and WebGL modes.

Export Formats

CSSFull CSS class with gradient background, animation keyframes, and filter properties. Copy-paste ready.
TailwindSingle utility class using arbitrary values. Drop it directly into your Tailwind project.
ReactReady-to-use React component with inline styles. Includes animation support.
React NativeExpo LinearGradient component for React Native projects.
SwiftSwiftUI gradient code for iOS and macOS apps.
KotlinJetpack Compose Brush.linearGradient for Android apps.
FlutterDart LinearGradient widget for Flutter projects.
SVGVector gradient element for scalable use in any design tool or web project.
PNGHigh-resolution raster export. Set canvas size first to control output dimensions (up to 8K with Pro).
JSONFull gradient state preset. Import it later or share with others to reproduce the exact gradient.
VideoMP4, WebM, and GIF recording of animated gradients. Choose quality (1080p, 2K, 4K with Pro).

Keyboard Shortcuts

UndoCmd + Z
RedoCmd + Shift + Z
Randomize / ShuffleSpace
Toggle FullscreenF

Tips

  • -Use OKLCH color space for the smoothest gradients — it avoids the gray/muddy midpoints common in RGB.
  • -Switch between Static and Animated modes freely — grain, blur, brightness, and colors are preserved.
  • -Use the Palette Browser (in Colors panel) to quickly apply curated color schemes.
  • -Set your canvas size before exporting — PNG exports use the exact dimensions you set.
  • -The Reverse button in Colors flips your gradient direction instantly.