WebGLGradient Engine

OKLab color science. 13 fluid algorithms. Halftone, ASCII matrix, and three export formats. Free, runs entirely in your browser.

Launch App ↗Quick Start
13 algorithms3 export formatsfree · no login

Six Capabilities

  • Palette & OKLab8 colorsoklabrgbimage extractUp to 8 colors blended in OKLab perceptual space. Drag to reorder. Extract a palette from any photo.
  • Shape & Flow13 algorithmsglsl60fps13 GPU-shaded fluid algorithms — from sine waves to curl noise vortices and signed-distance field shapes.
  • Post-Processingfilm grainbordercorner radius3d tiltNon-destructive compositing passes layered over the gradient. Film grain, inner border, corner radius, 3D parallax tilt.
  • Halftone4 matrices6 shapesgpuDithered halftone rendered as a GPU compositing pass. 4 Bayer matrices × 6 dot shapes with contrast control.
  • ASCII Matrix7 charsetsmouseheatmapFull-canvas character grid that reacts to mouse proximity in real time. 7 character sets plus custom text input.
  • Exportpngmp4html2×+PNG at 2× minimum resolution, MP4/WebM with ping-pong loop, or a self-contained HTML file with zero dependencies.

13 Algorithms

Every algorithm runs as a GLSL fragment shader on the GPU.

classic

  • Sin/CosSmooth periodic waves
  • Structured MappingOrdered geometric gradients
  • Linear StratifiedArchitectural layered bands

organic

  • Fluid DynamicsTurbulent noise-based motion
  • Domain WarpMarble-like UV distortion
  • Curl NoiseDivergence-free vortex flows
  • Polar VortexCosmic spiral structures

topology

  • Radial TopographyConcentric contour rings
  • Conic SweepAngular polar color sectors
  • Nested SDF ShapeGeometric glow from SDF math

diffusion

  • Diffusion GradientSoft procedural color spread
  • Diffusion FluidImage-warped blend field
  • Procedural SDFMulti-point distance fields

Export Anywhere

PNG

static asset

Full-resolution screenshot at 2× minimum device pixel ratio. Includes all active layers: gradient, halftone, ASCII matrix, and grain.

MP4

video loop

Live-recorded animation with optional ping-pong loop for seamless playback. WebM fallback on unsupported browsers.

HTML

embed anywhere

Self-contained file with the full WebGL shader and all parameters embedded. Drop into an iframe with zero dependencies.

Built for Makers

ui/ux designer

Generate animated gradient backgrounds for landing pages and hero sections. Export PNG for static mockups or MP4 for presentations.

frontend developer

Export standalone HTML and embed via iframe. Full-bleed animated backgrounds in any web project, one file, no build step.

brand designer

Upload a brand reference photo to extract dominant colors. Blend into a fluid gradient and export MP4 for social media.

content creator

Record short MP4 loops with ping-pong playback for seamless social media content. No watermark, no restrictions.

Free. No account. No install.

Launch App ↗Quick Start