Awesome

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 little stuff.

Tool page

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:<br>

• 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.<br>

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 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