Scroll · Move mouse · or set Auto

GigaBackground by BeGiga
Animated WebGL Fluid Background Generator

Fluid
Swirl
Flow Map
Drift
Blobs
Halftone
RGB Split
Grain
Made with GigaBackground
Configure
✕

GigaBackground by  BeGiga

Animated Fluid WebGL Background Generator
Create stunning fluid animated backgrounds for your web projects – powered by WebGL shaders and gradients running directly in your browser. Layer fluid distortion, swirl maps, coloroverlay drift, halftone and more on top of any image.

We recommend using a desktop device.
🎬
Try Demos
Click any demo in the bar below to instantly load a preset
⚙️
Customize
Use the Configure panel to tweak every parameter live
📤
Export
Export your config JSON to save settings or export html with embeded config
GigaBackground is a tool maintained by BeGiga – an IT & Commerce Lab focused on enterprise IT/AI consulting. From production-grade PHP E-Commerce ecosystems to Computer Vision labs and Agentic AI pipelines – we create, develop and design.

Looking to collaborate? Visit begiga.dev to secure an active partnership and discuss tailored solutions.


Privacy Policy

GigaBackground Controls

Trigger & Animation

▸

When off, the animation won't start until your page calls window.GigaBackground.start() - useful for deferring heavy init until after page load.

x

Renders the current look as a static PNG at the specified resolution, frozen at "moment zero" - no scroll, no mouse, no elapsed time. Trigger-bound effects render off (matching the real page before any interaction); Always-on effects stay visible. Use this as the poster image shown before the live background finishes loading. On export html there is embeded poster from image background allready, you can replace it with this poster.

1.00
1.00
0.40
0.40
1.00
1.00

0 = direct steady loop · 1 = soft easing

Layer 0 · Bottom Image

▸
1.00
1.00
0.00
0.00
Layer 0 preview

We suggest to use external image urls instead of uploaded images. Be advised that External image URLs are accesible and will work only from hosts that allow cross-site use (CORS headers).

Download File
No image loaded

Layer 1 · Background

▸
#0a0a1e
#1a0a2e
135°
135°
1.00
1.00

Layer 2 · Image

▸
1.00
1.00
18
18
0.00
0.00
0.50
0.50
0.50
0.50
0.40
0.40
Image preview

We suggest to use external image urls instead of uploaded images. Be advised that External image URLs are accesible and will work only from hosts that allow cross-site use (CORS headers).

Download File

Swirl Map ✦

▸
0.80
0.80
4
4
0.30
0.30
4
4
No map loaded

Image Fluid Distortion

▸
0.60
0.60
2.5
2.5
0.40
0.40
0.50
0.50
0.040
0.040

Image Swirl

▸
0.40
0.40
0.50
0.50
3.0
3.0
0.70
0.70
2
2

ColorOverlay Drift ✦

▸
0.85
0.85
0.70
0.70
16
16
1.00
1.00
1.00
1.00
1.20
1.20
1.10
1.10
0.50
0.50
–

ColorOverlay Blobs

▸
0.70
0.70
0.70
0.70
1.40
1.40
1.10
1.10

Halftone

▸
0.60
0.60
8
8

RGB Split

▸
0.50
0.50

Global

▸
0.10
0.10
0.30
0.30

Film Grain

▸
400
400
0.030
0.030

Credits Overlay

▸
Drop Image Here

Swirl Map Editor

Drag to paint flow directions. The shader updates live as you draw.

22
22
0.60
0.60
DRAG · TO · PAINT · FLOW
Demos

🌐 Export Standalone HTML

Hint: Ensure all image files are placed in the correct directory/declared url and properly hosted file to prevent cross-origin (CORS) issues.
Building…