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