A free, browser-based generator for professional HTML5 canvas effects. Tweak every parameter in real time. Export to standalone HTML, plain JavaScript, React, embed snippet, or PNG. No signup. No build step. No watermark. Released free under MIT.
Recent additions. The roadmap is open and contributions are welcome.
Fireworks, Matrix Rain, Particle Network, Snow, Dynamic Blob, Noise Gradient, Starfield, Flow Lines, Hexagon Mesh, Sine Waves, Neon Trails and Animated Noise. Each with 10-24 working controls.
Standalone HTML, plain JS, React component, embed iframe and PNG snapshot. All client-side, all free.
Editor chrome theme is independent of the canvas background colour. Design dark effects on a light page, or vice versa.
Most "particle background" tools are either paid lock-ins, framework-bound widgets, or bloated monorepos that break when you paste them into a real site. Canvas Code is the opposite - vanilla JavaScript classes, real-time tweaking, code that drops into anything.
Every slider, color picker, toggle and dropdown is wired to the running effect. No reload. No compile.
The exported code is the source running in your browser, with your current parameters baked in. No template engine, no static drift - what you see is what you get.
Tweak inside a Hero, Square, Mobile or Card frame so you know exactly how it'll look on your site - before you paste it.
Effects are plain JavaScript classes. The HTML, JS, React, Web Component and embed exports all wrap the same vanilla source.
Responsive canvas sizing, DPR-aware sharpness, no baked-in resolution. Drop the export into any container and it adapts.
No premium tier. No watermark. No telemetry. Use exported code in personal projects, agency work, client sites - no restrictions.
Each one ports faithfully to your stack via any of the five export formats.
Explosive particle bursts with 6 explosion patterns, mouse interaction, multi-color mode, secondary explosions and spark trails.
Falling characters with trails and glow. 5 character sets including Japanese katakana, binary and hexadecimal.
Smoothly drifting dots with 6 connection patterns: standard, mesh, star, ring, tree, random. Mouse-interactive.
Realistic falling snow with wind, sway, sparkle, depth layers and 4 snowflake shapes.
Fluid morphing gradient blobs in 5 layout patterns. The Stripe / Linear aesthetic.
Animated gradients with 4 noise patterns (perlin, simplex, fractal, turbulent), pulse and glow effects.
3D parallax stars travelling toward the camera. Mouse-controlled FOV, twinkle rate, multi-color mode.
Generative flow-field trails tracing through the canvas. Mouse pulls and disturbs the field - beautiful generative-art look.
Tessellated hexagon grid with travelling pulse waves, rotation and depth. Tech / sci-fi aesthetic.
Stacked oscillating waveforms with harmonics, distortion and decay. Audio-visualiser aesthetic for music or wellness sites.
Glowing particle trails with HDR bloom. Spiral, smooth, angular or random path styles. Tron / cyberpunk aesthetic.
Dynamic noise textures - perlin, ridged, cellular, marble, fire, clouds, electric, wood. The premium texture-overlay look.
Three minutes from "open tool" to "code in your project."
Pick an effect from the left sidebar. The canvas starts rendering immediately.
Adjust colour, count, speed, glow, patterns and physics in the right sidebar. Every change is reflected on the canvas instantly.
Use the Canvas dropdown for Dark / Light / White, and Preview to see the effect inside your destination size - Hero banner, Mobile, Square, etc.
Click Export ▾ and pick a format. Copy the code or download the file. Drop it straight into your project - no further setup needed.