Need help with draGGradients?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

132 Stars 13 Forks 45 Commits 1 Opened issues


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

Services available


Need anything else?

Contributors list

# 8,126
40 commits


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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.