Caustics

Ambient
Interactive — move your cursor

Description

Sunlight dancing through water: layered counter-drifting caustic light webs with hot white cores, chromatic dispersion fringes, and traveling brightness, over a depth-graded pool floor crossed by faint god-ray shafts. The cursor casts a soft water-lens ripple that warps the network, and an optional image renders as the submerged pool floor with refractive wobble.

What is the water caustics background?

Caustics is a free water caustics background that renders in real time with WebGL, so it stays sharp on any screen without shipping a heavy video file or GIF — and it pauses while off-screen to keep pages fast.

Use it as visual inspiration for a hero or section background on a landing page, portfolio, SaaS site or app. Every parameter — colors, speed and intensity — is adjustable in the remix playground. No account is needed to preview it.

Make it yours

Every knob below is tuned by the AI to match your design — or ask for changes in plain language, like “slower and more blue.”

colorsPalette

Water-to-light ramp, 2-5 hex colors ordered dark to bright: first stops paint the deep pool floor, last stops paint the hot filament cores. Higher contrast between first and last = more dramatic glowing webs; low contrast = soft hazy water. Keep one hue family for realism (teal, violet, emerald) or end on near-white for sun-through-water sparkle.

bgPalette

Deepest shadow color that corners and the frame bottom sink into. Darker than the first palette color = stronger sense of depth; matching the host section color makes the effect melt into the page.

bg-alpha0–1

Opacity of the water body itself. 1 = full submerged scene with floor and depth grading; 0 = only the glowing caustic webs and ray shafts float transparently over the host section behind.

speed0.05–2

How fast the light webs dance and drift. Lower = serene, almost-still deep water; higher = lively shallow pool on a windy day. Above 1.2 starts to feel energetic rather than calm.

scale0.4–2.5

Density of the caustic network. Higher = many small tight cells (shallow sparkling water, busier texture); lower = few large languid cells (deep cathedral light, more restful and monumental).

intensity0–2

Brightness of the light filaments. Higher = blazing white-hot webs that dominate the frame; lower = faint ghostly shimmer barely rising out of the depth. 0 removes the webs entirely, leaving only graded water.

dispersion0–1.5

Chromatic splitting of the filaments into subtle rainbow fringes, like real underwater light. Higher = visibly prismatic, jewel-like edges; 0 = clean monochrome light lines. Keep near default for realism, push high for an iridescent fantasy look.

rays0–1.5

Strength of the faint god-ray shafts slanting across the upper frame. Higher = visible cathedral light beams piercing the water; 0 = no shafts, pure floor caustics. They stay soft and never overpower the webs.

depth0–1

How deep the scene feels: drives the corner vignette, the dark-at-bottom grading, and how strongly an image floor is tinted and shadowed by the water. Higher = sunk in a deep pool with moody falloff; lower = flat, bright, shallow and evenly lit.

wobble0–1.5

Organic distortion of the light network and refractive wobble of the floor image. Higher = drunker, more liquid meandering lines and a visibly swimming image; lower = calmer, more geometric web and a steadier floor.

imageImage

Optional https image rendered as the submerged pool floor (cover-fit). It gets depth-tinted toward the palette, wobbles refractively, and the caustic webs dance on top with soft shadows between filaments. Leave empty for the procedural graded floor.

mouse0–1

Strength of the cursor's water-lens ripple: expanding rings that warp the light web plus a soft local focusing of brightness. Higher = a clear interactive ripple following the pointer; 0 = fully off, pure ambient water. Idle always settles back to the exact ambient look.

Frequently asked questions

Yes. You can preview the water caustics background for free in the AIDesigner effects library — no watermark and no sign-up required to try it.

Use "Remix this effect" to tune the colors, speed, and parameters, then use the preview as a reference for your website background implementation.

It renders on the GPU through WebGL at a capped frame rate, so it is far lighter than a background video and automatically stops drawing when it scrolls out of view — keeping load and battery impact low.

Yes. Every knob in the "Make it yours" section is adjustable, and you can also just ask the AI in plain language — for example "slower and more blue" — and it retunes the water caustics background to match.

More effects

View all