https://github.com/elrumordelaluz/draGGradients

A simple tool to generate and customize multiple css3 radial gradients.
https://github.com/elrumordelaluz/draGGradients

Last synced: 9 days ago
JSON representation

A simple tool to generate and customize multiple css3 radial gradients.

• Host: GitHub
• URL: https://github.com/elrumordelaluz/draGGradients
• Owner: elrumordelaluz
• Created: 2014-09-05T22:11:11.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2020-11-15T09:49:47.000Z (almost 4 years ago)
• Last Synced: 2024-08-02T15:26:38.698Z (3 months ago)
• Language: JavaScript
• Homepage: http://elrumordelaluz.github.io/draGGradients/
• Size: 504 KB
• Stars: 141
• Watchers: 7
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
draGGradients

=============

A simple tool to generate and customize multiple css3 radial gradients.

I get back an old project that uses a multiple gradient jpg image as a background and started to generate the same image in css-only. Instead of code only this image I finished doing [this](http://elrumordelaluz.github.io/draGGradients/) little stuff.

### [Tool page](http://elrumordelaluz.github.io/draGGradients/)

##### How to use it?

Toggle main controls clicking the cog-icon on the up-right corner (also pressing ESC key) to customize, add and arrange each point generator.

Basically the tool works generating radial-gradients from each draggable point, and you could control:


- __The main color.__ Wrinting any valid (rgba, rgb, hex, html, etc) color type or picking one from the colorPicker.

- __The position.__ Dragging each point in the canvas.

- __The deep.__ Sliding or changing the value, you could set the percentage of each radial-gradient.


You could also __add__, __delete__ and __arrange__ each point from the same section.

In the bottom left menu, you could:

- __Toggle points.__ Switch on/off the points from the main view.

- __Change background.__ It modifies the last child of the gradient that works as background.

- __Generate random.__ Clicking on the shuffle-icon.

- __Presets__ from [uigradients](https://github.com/Ghosh/uiGradients/blob/master/gradients.json) by Indrashish Ghosh.

Of course you could __copy the generated code__ clicking the _code-icon_ and __generate a pen__ clicking on _Codepen icon_

This is a simple, little, tool made with ❤ by [@elrumordelaluz](http://www.twitter.com/elrumordelaluz)