Easy configurable gradient picker, with no dependencies
Branch: master
Clone or download
Latest commit ee695f5 Nov 6, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/img Add assets Sep 12, 2017
src Update updatePreview Nov 6, 2017
test v0.1.2 Oct 31, 2017
.eslintrc Inital commit Sep 9, 2017
.gitignore Inital commit Sep 9, 2017
README.md Update README, add Configurations Nov 6, 2017
_config.yml Set theme jekyll-theme-cayman Sep 12, 2017
index.html Update updatePreview Nov 6, 2017
package-lock.json Bump v0.1.7 Nov 6, 2017
package.json Bump v0.1.7 Nov 6, 2017
webpack.config.js Add renderer Sep 11, 2017



Easy configurable gradient picker, with no dependencies.



You can download the file from here (CSS), via npm i grapick or directly from the /dist folder of this repo


<link rel="stylesheet" href="path/to/grapick.min.css">
<script src="path/to/grapick.min.js"></script>

<div id="gp"></div>

<script type="text/javascript">
  const gp = new Grapick({el: '#gp'});

  // Handlers are color stops
  gp.addHandler(0, 'red');
  gp.addHandler(100, 'blue');

  // Do stuff on change of the gradient
  gp.on('change', complete => {
    document.body.style.background = gp.getSafeValue();


  • pfx - Class prefix (string)
  • el - Element on which the picker will be attached (HTMLElement or query string)
  • colorEl - Element to use for the custom color picker, eg. '
  • min - Minimum handler position, default: 0 (integer)
  • max - Maximum handler position, default: 100 (integer)
  • direction - Any supported gradient direction: '90deg' (default), 'top', 'bottom', 'right', '135deg', etc.
  • type - Gradient type, available options: 'linear' (default) | 'radial' | 'repeating-linear' | 'repeating-radial'
  • height - Gradient input height, default: '30px'
  • width - Gradient input width, default: '100%'

Add custom color picker

Grapick is color picker independent and uses the browser's native one, by default, just to make it more accessible, but you can easily switch it with one of your choices (recommended as not all browsers support properly input[type=color]).

In the example below we use spectrum color picker just as the proof of concept

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">

<div id="gp"></div>

<script type="text/javascript">
  const gp = new Grapick({
    el: '#gp',
    colorEl: '<input id="colorpicker"/>' // I'll use this for the custom color picker

  gp.setColorPicker(handler => {
    const el = handler.getEl().querySelector('#colorpicker');

        color: handler.getColor(),
        showAlpha: true,
        change(color) {
        move(color) {
          handler.setColor(color.toRgbString(), 0);


Available events

  • change - Gradient is changed
  • handler:drag:start - Started dragging the handler
  • handler:drag - Dragging the handler
  • handler:drag:end - Stopped dragging the handler
  • handler:select - Handler selected
  • handler:deselect - Handler deselected
  • handler:add - New handler added
  • handler:remove - Handler removed
  • handler:color:change - The color of the handler is changed
  • handler:position:change - The position of the handler is changed


Clone the repository and enter inside the folder

$ git clone https://github.com/artf/grapick.git
$ cd grapick

Install it

$ npm i

Start the dev server

$ npm start


API Reference here


Run tests

$ npm test

Run and watch tests

$ npm run test:dev