Generate Gradients From uiGradients - jQuery belerise

belerise is a jQuery plugin for creating beautify gradient backgrounds that fetch data (names & color arrays) from uiGradients and apply specific gradient and direction on the selected element.

See Also:

• Online CSS Gradient Generator

How to use it:

1. Download and place the main JavaScript file belerise.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/belerise.js"></script>

2. Add a gradient to your element using jQuery selector. You can find all graditent in the gradients.json.

[
  {
      "name": "Omolon",
      "colors": ["#091E3A", "#2F80ED", "#2D9EE0"]
  },
  {
      "name": "Farhan",
      "colors": ["#9400D3", "#4B0082"]
  }, 
  {
      "name": "Purple",
      "colors": ["#c84e89", "#F15F79"]
  },
  {
      "name": "Ibtesam",
      "colors": ["#00F5A0", "#00D9F5"]
  },
  {
      "name": "Radioactive Heat",
      "colors": ["#F7941E", "#72C6EF", "#00A651"]
  },
  // ...
]

$(function(){
  // $(element).belerise(name);
  $("body").belerise("Beleko");
});

3. Set the direction of the gradient. Default: 'right'.

$(function(){
  // $(element).belerise(name, direction);
  $("body").belerise("Beleko", "left");
  $("body").belerise("Beleko", "top");
  $("body").belerise("Beleko", "bottom");
});

Changelog:

2020-01-06

• Update belerise.js

---

This awesome jQuery plugin is developed by BossBele. For more Advanced Usages, please check the demo page or visit the official website.