About GradyGen

GradyGen is a free, WebGL-powered tool for creating animated wavy gradient backgrounds directly in your browser. Every animation loops seamlessly, so you can export and tile it anywhere without seams or additional editing.

Keyboard Shortcuts
  • C — toggle the Controls sidebar (right)
  • E — toggle the Export sidebar (left)

All sliders support modifier keys while dragging:

  • Drag — normal speed; cursor locks and hides so the slider keeps moving past the screen edge
  • Shift + drag — precision mode at 0.01× speed for fine adjustments
  • Ctrl + drag — 0.5× speed + snap to the nearest preset step (e.g. 45° for camera angles, 0.25 for scale)
  • Shift + Ctrl + drag — 0.5× speed + snap to half the preset step (e.g. 22.5°, 0.125 for scale)
  • Right-click — reset any slider to its default value

Any modifier can be pressed or released mid-drag at any time without jumping.

Controls

The right sidebar shapes the gradient in real time. Collapsible groups keep options organized:

  • Presets — browse and apply gradient presets, with optional auto-cycling between them
  • Colors — background color plus up to eight wave colors, each with a position slider
  • Geometry — mesh resolution and number of wave layers
  • Displacement — amplitude, frequency, and speed per wave layer
  • Grain — film grain: opacity, contrast, animation speed, and size
  • Blend — how wave colors are mixed together
  • Transform — scale and offset the view
  • Camera — orbit the camera horizontally, arc it up and down, or roll it
  • Performance — frame rate cap and live fps / frame-time readout
  • Export & Publish — save your settings as a .json file or share your gradient with the community
Export

The left sidebar handles saving your gradient:

  • Image — a single .png, .jpg, or .webp frame at any standard aspect ratio
  • Image Sequence — a .zip of consecutively-numbered .png, .jpg, or .webp frames at resolutions up to 4K, covering one complete loop, ready to drop into any video editor
  • HTML Export — a self-contained .html file with the gradient baked in as a looping website background
Community Presets

The preset browser has two tabs:

  • Default — built-in presets that ship with GradyGen
  • Community — gradients shared by other users. Click any card to load it

Made something worth sharing? Scroll to the bottom of the Controls sidebar and hit Publish to Community. Give it a name and a handle and it goes live for everyone.

Timeline

The strip at the bottom of the screen shows a live waveform of the current displacement across one full loop:

  • Play / Pause — start or stop the animation
  • Waveform — canvas rendering of the displacement curve; updates live as you adjust wave settings
  • Playhead — drag anywhere on the waveform to scrub; release to resume playing from that position
  • Time display — shows current position and total loop duration
Top Bar
  • About — opens this info panel
  • Buy Me a Coffee — support my project, view my other projects (WIP)
  • Maximize — toggle fullscreen
  • Hide UI — hide all panels to preview the gradient unobstructed