Displays GLSL Fragment Shading Background Of The Website | shader-web-background

Displays GLSL fragment shading as the background of the website. Supports Shadertoy, multi-track shader – off-screen ping-pong stores, feedback loops, floating-point texture.

Whether with WebGL 1 or 2, it will attempt to operate wherever it is technically feasible.


  • Simplicity: It’s just presenting the canvas background as a sliver shading.
  • Speed: Designed to be embedded in HTML and start rendering before other page resources are downloaded.
  • Scalability: Adding interactivity and controls is trivial
  • Convenience: Clear API, specific errors will inform you of the ones that are difficult to correct.
  • Minimum footprint: Converted from JavaScript to JavaScript using Google Closure Compiler.
  • Pixel feedback loops: Preserve timely movement on buffers off-screen with floating-point accuracy.
  • Shadertoy support: including multass shader
  • Cross-browser / cross-device: On Chrome, Safari, Firefox, or Edge, either with WebGL 1 or 2 or on Linux, Windows, Mac, iPhone, or Samsung phone – it will use the optimal strategy to extract what’s possible from the browser and devices.

How to make use of it:

1. Load the shader-web-background.js JavaScript library within the doc.

<script src="dist/shader-web-background.min.js"></script>

2. Add your fragment shaders to the head part of the doc.

<script type="x-shader/x-fragment" id="image">
  precision highp float;
  uniform float iTime;
  void main() {
    gl_FragColor = vec4(
      mod(gl_FragCoord.x / 256., 1.),
      mod((gl_FragCoord.x + gl_FragCoord.y - iTime * 40.) / 256. , 1.),
      mod(gl_FragCoord.y / 256., 1.),

3. Enable the Fragment Shader Background.

  shaders: {
    image: {
      uniforms: {
        iTime: (gl, loc) => gl.uniform1f(loc, performance.now() / 1000)

4. Add a fallback background to the web page.

.shader-web-background-fallback {
  background: url("fallback-bg.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;    

5. Available configurations and occasion handlers.

  // canvas element on which the background should be rendered
  canvas: HTMLCanvasElement,
  // definition of shaders
  shaders: {
    image: {
      uniforms: {
        iTime: (gl, loc) => gl.uniform1f(loc, performance.now() / 1000)
  // callbacks
  onInit: function(Context){},
  onResize: function(!number, !number, Context){},
  onBeforeFrame: function(Context){},
  onAfterFrame: function(Context){},
  onError: ErrorHandler

GLSL Fragment Shader Background, Shader Web Background Plugin/Github, glsl fragment shader example, glsl shaders examples, glsl shaders, shadertoy, glsl download, glsl viewer, glsl shader library

See Demo And Download

Official Website(xemantic): Click Here

This superior jQuery/javascript plugin is developed by xemantic. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…