Home Color JavaScript Library For Creating Smooth Gradients Generator

JavaScript Library For Creating Smooth Gradients Generator

Color webcodeflow · September 20, 2022 · 0 Comment

Gradient Generator is a small JavaScript library for creating smooth gradients. A library that you can use to assign values between 0.0 and 1.0 to colors by defining gradients.

smooth gradient css, 3 color gradient generator, gradient generator css, linear gradient generator, gradient background css

Quick Animated Gradient Border In Pure CSS

How to make use of it:

1. Load gradient-generator.dev.js into the document.

<script src="path/to/gradient-generator.dev.js"></script>

2. Create an Html5 panel element where you want to draw the gradients.

<canvas id="canvas" width="500" height="500" style="background: black"></canvas>

3. JavaScript to generate gradients using custom colors.

(function () {
  var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d'),
      imageData = ctx.getImageData(0, 0, canvas.getAttribute('width'), canvas.getAttribute('height')),
      pixels = imageData.data,
      gradient = GradientGenerator.createGradient('#000000 #c50106 #f5f100 #ffffff'),
      val,
      color,
      base,
      x,
      y;
  for (y = 0; y < imageData.height; ++y) {
      for (x = 0; x < imageData.width; ++x) {
          val = (x + y) / (imageData.width + imageData.height);
          color = gradient.getColorBytesAt(val);
          base = (y * imageData.width + x) * 4;
          pixels[base] = color.r;
          pixels[base + 1] = color.g;
          pixels[base + 2] = color.b;
          pixels[base + 3] = 255;
      }
  }
  ctx.putImageData(imageData, 0, 0);
})();

Pure JavaScript Smooth Gradient Generator Plugin/Github