Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

Random CSS Gradient Generator JavaScript Example and Code

Random CSS Gradient Generator is a gradient generator that creates a new CSS linear-gradient or CSS radial-gradient. You can copy the style to use on your website. To generate another gradient, you can click or touch the background of the gradient. To clear the history of the gradients, you can use the black “x” button. To copy the gradient to your clipboard just click the CSS gradient style in the bubble.

Live Demo

Building the CSS Gradient Generator

In order to build this generator, you will need some basic knowledge of HTML, CSS, and JavaScript.

You can find a tutorial on HTML here. Another tutorial on CSS. Also, last, a tutorial on basic JavaScript.

First, we want to create some basic HTML elements. The first element is the background where we set the gradient. This element will be a div element with a class name of super.

<div class="super"></div>

Inside of the "super" element, we will add two more div elements with the class name "info" and "history".

<div class="super">
  <div class="info"></div>
  <div class="history"></div>
</div>

Now that we have all of our HTML in place for the generator, we can add the CSS styles to give the project some shape.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed";
.history {
  text-align: center;
  > span {
    position: relative;
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    border-radius: 2em;
    box-shadow: 0 0 0 0.15em, 0 0.3em 1em -0.3em #000;
    margin: 0.3em;
  }
  .clear {
    background: rgba(#000, 0.85);
    user-select: none;
    &::after {
      content: "×";
      position: absolute;
      top: 50%;
      left: 50%;
      line-height: 0;
      // font-family: monospace;
      transform: translate(-50%, -50%);
      font-size: 1.5em;
    }
  }
}

.info {
  margin-bottom: 1em;
  flex: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
  font-size: 0.8em;
  > div {
    background: rgba(#000, 0.25);
    line-height: 1.5;
    padding: 0.75em 1em;
    border-radius: 2em;
    pointer-events: auto;
  }
}

.super {
  padding: 50px;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 3vmax;
  height: 100%;
}

// reset
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

Giving The CSS Gradient Generator Function

We will use a custom function multi listener to handle the click and touch event on the background of the gradient wall. The click and touch events are JavaScript events when a user interacts with the elements.

addListenerMulti(document, "click touchend", clickHandler);

If either of these click event or touchend event is triggered, the listener will run the custom clickHandler function.


  var handled = false;
  var clickHandler = function (e) {
    e.stopImmediatePropagation();
    if (e.type == "touchend") {
      handled = true;
      check(e);
    } else if (e.type == "click" && !handled) {
      check(e);
    } else {
      handled = false;
    }
  };

Once the clickHandler function handles the event, it will pass it to a function called "check"

function check(e) {
    if (e.target.className === "super") {
      doIt(e.target);
    } else if (e.target.classList.contains("clear")) {
      history.innerHTML = "";
      history.appendChild(clear);
    } else if (e.target.parentElement.className === "info") {
      selectText(e.target);
    } else if (e.target.tagName === "SPAN") {
      var b = e.target.style.backgroundImage;
      doIt(body, b, true);
    }
  }

Function check will determine whether the user wants to copy the CSS gradient style to the clipboard, clear the history, or generate a new CSS gradient.

Full JavaScript

(function () {
  "use strict";

  var body = document.querySelector(".super");
  var history = document.querySelector(".history");
  var info = document.querySelector(".info");
  var clear = document.createElement("SPAN");
  clear.classList.add("clear");
  history.appendChild(clear);

  var randum = function (max) {
    return Math.round(Math.random() * max);
  };

  var hexify = function (x) {
    return ("0" + parseInt(x).toString(16)).slice(-2);
  };

  var randex = function () {
    return (
      "#" + hexify(randum(255)) + hexify(randum(255)) + hexify(randum(255))
    );
  };

  var blender = function () {
    if (!!Math.round(Math.random())) {
      return (
        "radial-gradient(circle at " +
        randum(100) +
        "% " +
        randum(100) +
        "%, " +
        randex() +
        ", " +
        randex() +
        ")"
      );
    } else {
      return (
        "linear-gradient(" +
        randum(360) +
        "deg, " +
        randex() +
        ", " +
        randex() +
        ")"
      );
    }
  };

  var cleanMe = function (str) {
    if (str) {
      return str.replace(/rgb\(([\d,\s]+)\)/g, function (m) {
        m = m.match(/(\d+)/g);
        return "#" + hexify(m[0]) + hexify(m[1]) + hexify(m[2]);
      });
    }
  };

  var doIt = function (element, b, stop) {
    b = cleanMe(b) || blender();
    element.style.backgroundImage = b;
    info.innerHTML = "<div>" + b + "</div>";
    if (!stop) {
      var output = document.createElement("SPAN");
      history.insertBefore(output, history.childNodes[0]);
      doIt(output, b, true);
    }
  };

  function selectText(element) {
    var range = document.createRange(); // create new range object
    range.selectNodeContents(element); // set range to encompass desired element text
    var selection = window.getSelection(); // get Selection object from current user-selected text
    selection.removeAllRanges(); // unselect any user-selected text (if any)
    selection.addRange(range); // add range to Selection object to select it
  }

  function check(e) {
    if (e.target.className === "super") {
      doIt(e.target);
    } else if (e.target.classList.contains("clear")) {
      history.innerHTML = "";
      history.appendChild(clear);
    } else if (e.target.parentElement.className === "info") {
      selectText(e.target);
    } else if (e.target.tagName === "SPAN") {
      var b = e.target.style.backgroundImage;
      doIt(body, b, true);
    }
  }

  var handled = false;
  var clickHandler = function (e) {
    e.stopImmediatePropagation();
    if (e.type == "touchend") {
      handled = true;
      check(e);
    } else if (e.type == "click" && !handled) {
      check(e);
    } else {
      handled = false;
    }
  };

  doIt(body);

  function addListenerMulti(scope, signatures, fn) {
    var events = signatures.split(" ");
    for (var i = 0, len = events.length; i < len; i++) {
      scope.addEventListener(events[i], fn, false);
    }
  }

  addListenerMulti(document, "click touchend", clickHandler);
})();

Edit This Project

This project can be found on codepen.io

Recommended Articles