draGGradients is as 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. Hope you enjoy it!
Toggle main controls (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 this button.
- Presets from uigradients by Indrashish Ghosh.
You could also create a pen with the generated gradient, clicking on the Codepen logo.
This simple and little tool was made with ❤ by @elrumordelaluz