← sketches

shader gradient

Animated color gradient in a fragment shader.

GLSL / WebGL

#ifdef GL_ES
precision highp float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution;
    float t = u_time * 0.3;

    vec3 a = vec3(0.1, 0.05, 0.15);
    vec3 b = vec3(0.3, 0.1, 0.4);
    vec3 c = vec3(0.9, 0.4, 0.2);
    vec3 d = vec3(0.05, 0.6, 0.5);

    float mixer = sin(uv.x * 3.0 + t) * cos(uv.y * 3.0 - t * 0.7) * 0.5 + 0.5;
    vec3 color = mix(mix(a, b, uv.x + sin(t) * 0.2), mix(c, d, uv.y + cos(t * 0.5) * 0.2), mixer);

    gl_FragColor = vec4(color, 1.0);
}