Shader Playground

GPU-powered background effects — pick a preset or write your own GLSL.

Aurora

Fragment Shader

precision mediump float;
uniform float u_time;
uniform vec2 u_resolution;
void main(){
  vec2 uv=(gl_FragCoord.xy-u_resolution*.5)/u_resolution.y;
  float t=u_time*.4;
  vec3 col=vec3(0);
  for(float i=1.;i<6.;i++){
    uv.y+=sin(uv.x*i*1.5+t*i*.3)*.15/i;
    float d=abs(uv.y)*(40.+i*10.);
    col+=vec3(.2/d,.4/d,.6/d)/i;
  }
  col=pow(col,vec3(.8));
  gl_FragColor=vec4(col,1);
}

Shader Presets

💡 Tip

Click any preset to preview it. Each shader runs on the GPU in real-time. Copy the GLSL code to use in your own projects.

Home
Backgrounds
Shadow Play
SVG Maker
Shaders
ASCII Animator
Isometric Maker
GitHub