WebGL Liquid Gold Background Shader
Overview
A molten gold background for React and Next.js, written as a small WebGL shader with no 3D library. Slow folds of polished metal reflect a studio lit from inside the shader, and the surface rises towards the cursor.
The surface is a height field: a few sines bending each other into heavy folds, with no noise and no fine grain. Every pixel follows a ray down to that surface, bounces, and reads a room described in the shader, with softboxes for the shapes you recognise as polish and dark between them. Shadows run red-brown and highlights run pale, so the metal stays gold and never turns lemon or plastic.
Details
- Category
- Backgrounds
- Interaction
- On Load + Mouse Move
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 082 / Backgrounds
WebGL Silk Fabric Background Shader with Cursor Ripple
On Load · Mouse Move · On Click
No. 065 / Backgrounds
WebGL Marble Background with Gold Veins on Scroll
On Scroll · Mouse Move
No. 056 / Backgrounds
WebGL Animated Gradient Background with Film Grain
On Load · Mouse Move
(02)FAQ
WebGL Liquid Gold Background Shader — FAQ
01How do I change the metal?
Pass any CSS colour as color, and a near black as shadow. Saturated golds work best. A pale grey gives you silver, and a pinkish copper gives you rose gold.
02How do I keep my heading readable?
Pass it as children and set fade, from 0 to 1. It sets how much of the top of the frame stays dark. The default of 0.5 leaves roughly the top third almost black.
03What does it need from my page?
React and Tailwind CSS v4 for a few layout classes on the wrapper. It has no npm dependencies: no Three.js, no GSAP, and no image files to load. className sets the section's size, so give it a height, such as min-h-dvh.
04Will it slow down a laptop?
It caps the pixel ratio at 1.5, or 1.25 on small screens. It averages its frame time as it runs and lowers the resolution in steps, down to 0.6, while frames run over 24ms. It draws nothing off screen or in a hidden tab.
05What happens without WebGL or with reduced motion?
Without WebGL, or when the browser would draw on the CPU, a CSS gradient in your colours stays in place. With reduced motion it draws one still frame and doesn't respond to the cursor.