WebGL GLSL Shader Studio& Playground
Create stunning animated backgrounds, hero sections, and visual effects for your website. Designer-friendly color pickers, 18 ready-to-use presets, and one-click export to HTML, React, Three.js, CSS, and Web Components.
100% Client-Side Memory Execution: Shaders compile directly on your graphics card (GPU) locally in your browser. Zero code or canvas frames are uploaded anywhere.
Designer Controls & Color Palette
Uniform Parameters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGL Shader Output</title>
<style>
body { margin: 0; overflow: hidden; background: #000; }
canvas { width: 100vw; height: 100vh; display: block; }
</style>
</head>
<body>
<canvas id="glcanvas"></canvas>
<script>
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');
const vs = `attribute vec2 p; void main() { gl_Position = vec4(p, 0.0, 1.0); }`;
const fs = `
precision highp float;
uniform vec2 iResolution;
uniform float iTime;
uniform vec4 iMouse;
uniform float uSpeed;
uniform float uZoom;
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform vec3 uColor3;
uniform float uIntensity;
// Fluid Liquid Chrome — Glass & Chrome
// Uses uColor1, uColor2, uColor3 color pickers
float fcHash(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}
float fcNoise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(mix(fcHash(i + vec2(0.0, 0.0)), fcHash(i + vec2(1.0, 0.0)), u.x),
mix(fcHash(i + vec2(0.0, 1.0)), fcHash(i + vec2(1.0, 1.0)), u.x), u.y);
}
float fcFbm(vec2 p) {
float v = 0.0;
float a = 0.5;
mat2 rot = mat2(0.8, 0.6, -0.6, 0.8);
for (int i = 0; i < 4; i++) {
v += a * fcNoise(p);
p = rot * p * 2.0;
a *= 0.5;
}
return v;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
float t = iTime * 0.4 * uSpeed;
vec2 p = uv * 2.5 * uZoom;
if (iMouse.z > 0.0) {
vec2 m = (iMouse.xy - 0.5 * iResolution.xy) / iResolution.y;
p += (uv - m) * 0.4 / (length(uv - m) + 0.1);
}
float n1 = fcFbm(p + vec2(t * 0.3, t * 0.2));
float n2 = fcFbm(p + vec2(n1 * 3.0, t * 0.4));
float n3 = fcFbm(p + vec2(n2 * 2.5, n1 * 2.0 - t * 0.3));
// Calculate normal vector for metallic lighting
vec2 eps = vec2(0.01, 0.0);
float h = n3;
float hx = fcFbm(p + eps.xy + vec2(n2 * 2.5, n1 * 2.0 - t * 0.3));
float hy = fcFbm(p + eps.yx + vec2(n2 * 2.5, n1 * 2.0 - t * 0.3));
vec3 norm = normalize(vec3((hx - h) / eps.x, (hy - h) / eps.x, 0.8));
vec3 lightDir = normalize(vec3(0.5, 0.8, 1.0));
float diff = max(dot(norm, lightDir), 0.0);
float spec = pow(max(dot(reflect(-lightDir, norm), vec3(0.0, 0.0, 1.0)), 0.0), 32.0);
// Iridescent chrome gradient
vec3 chromeGrad = mix(uColor1, uColor2, sin(n3 * 6.28 + t) * 0.5 + 0.5);
chromeGrad = mix(chromeGrad, uColor3, cos(norm.x * 3.0 + norm.y * 3.0) * 0.5 + 0.5);
vec3 col = chromeGrad * (diff * 0.6 + 0.4) + vec3(1.0) * spec * 0.8;
col *= uIntensity;
fragColor = vec4(col, 1.0);
}
void main() {
mainImage(gl_FragColor, gl_FragCoord.xy);
}`;
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}
const program = gl.createProgram();
gl.attachShader(program, createShader(gl, gl.VERTEX_SHADER, vs));
gl.attachShader(program, createShader(gl, gl.FRAGMENT_SHADER, fs));
gl.linkProgram(program);
gl.useProgram(program);
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]), gl.STATIC_DRAW);
const loc = gl.getAttribLocation(program, 'p');
gl.enableVertexAttribArray(loc);
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
// Set color uniforms
gl.uniform1f(gl.getUniformLocation(program, 'uSpeed'), 1.0);
gl.uniform1f(gl.getUniformLocation(program, 'uZoom'), 1.0);
gl.uniform3f(gl.getUniformLocation(program, 'uColor1'), 0.388, 0.400, 0.945);
gl.uniform3f(gl.getUniformLocation(program, 'uColor2'), 0.925, 0.282, 0.600);
gl.uniform3f(gl.getUniformLocation(program, 'uColor3'), 0.024, 0.714, 0.831);
gl.uniform1f(gl.getUniformLocation(program, 'uIntensity'), 1.0);
function render(now) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
gl.uniform2f(gl.getUniformLocation(program, 'iResolution'), canvas.width, canvas.height);
gl.uniform1f(gl.getUniformLocation(program, 'iTime'), now * 0.001);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
</script>
</body>
</html>About WebGL Shader Studio — Animated Backgrounds for Web Designers
Create, customize, and export stunning animated WebGL backgrounds for your website. Designer-friendly color pickers, 18 production-ready presets (aurora gradients, particle constellations, wave layers, mesh gradients, geometric patterns, dark mode orbs), and instant export to HTML, React, Three.js, CSS fallbacks, and Web Components.
How to Use
- 1Browse the preset gallery — filter by category (Hero Backgrounds, Gradients & Blobs, Geometric Patterns, Ambient & Texture, Dark Mode FX) or view all 18 presets.
- 2Customize colors instantly using the 3 color pickers (uColor1, uColor2, uColor3) — every designer preset responds to your palette.
- 3Fine-tune the animation with Speed, Zoom, and Intensity sliders for the perfect look.
- 4Edit GLSL code directly in the live editor with instant compilation and inline error reporting.
- 5Export your shader to Standalone HTML, React TSX, Three.js ShaderMaterial, CSS-only fallback gradient, self-contained Web Component, or download a PNG snapshot.
Key Benefits
- Designer-Friendly: 3 color pickers + intensity slider let you match your brand palette without touching code.
- 18 Production-Ready Presets: Aurora gradients, particle constellations, wave layers, liquid blobs, mesh gradients, grid pulses, hex tessellations, noise grain, spotlight glow, gradient orbs, and classic developer shaders.
- 6 Export Formats: Vanilla HTML, React TSX, Three.js ShaderMaterial, CSS-only fallback, Web Component (<shader-bg>), and raw GLSL.
- Hardware Accelerated: Compiles directly on your GPU for smooth 60+ FPS rendering.
- 100% Client-Side Privacy: All shader execution stays local in browser memory with zero network uploads.
Frequently Asked Questions (FAQ)
Frequently Asked Questions
Select a preset, customize the colors using the 3 color pickers, adjust speed and intensity, then click the Export tab. Choose 'Vanilla HTML' for a standalone page, 'React TSX' for React apps, 'Web Component' for a drop-in <shader-bg> element, or 'CSS Fallback' for a static gradient approximation.
Yes! The Designer Controls panel includes 3 color pickers (uColor1, uColor2, uColor3) that all designer presets respond to. Enter your brand hex colors directly, and the shader updates in real-time. The export code will include your chosen colors.
Yes! The tool natively supports standard Shadertoy syntax including void mainImage(out vec4 fragColor, in vec2 fragCoord) and built-in uniforms like iTime, iResolution, iMouse, iTimeDelta, iFrame, and iChannel0.
Absolutely. Click the Export Code tab to get copy-paste snippets for vanilla WebGL HTML files, React TSX components, Three.js ShaderMaterial definitions, CSS-only fallback gradients, self-contained Web Components, or raw GLSL code.
The CSS Fallback generates a pure CSS background gradient that approximates your shader's color palette. Use it as a fallback for browsers that don't support WebGL, or for static pages where you want a matching gradient without JavaScript.
Yes, you can save custom shader presets directly to your browser's LocalStorage or copy a shareable link containing your encoded shader code.
Not at all. Everything executes 100% client-side inside your browser's WebGL graphics memory. No graphics data or code is ever uploaded to any external server.