About ColorBeta

There is a complete guide to help you use ColorBeta. But here's a summary of most essential steps:

• Click on the [+] button to add a gradient (linear, radial or conic). By default, a gradient from red to blue will appear.
• On the right side panel, click on the gradient thumbnail. In the editing panel that appears next to it, you can then edit or add new colors.
• Click below the color preview bar to add a new color stop. Drag it to change its position.
• On the left side, click on the "<>" button to copy the CSS code. That's it!

Remember, if in doubt, just click on the "tutorial" button in the top menu.

Yes.

Yes, absolutely, you can stack as many gradients as you want. Just make sure that the gradients at the top of the stack are semi-transparent. For even more impressive effects, you can also try blending their colors by clicking on the "Blend Mode" button on the left side.

It is not yet possible to directly download a CSS gradient as an image. But, there is a fairly quick alternative solution. For example, here's how to do it with a Chromium-based browser:

• Once you've finished creating your gradient, click on the "Maximize" button on the left side.
• Open the "Developer tools" (press F12).
• Click on the "Toggle device toolbar" icon (Ctrl + Shift + M).
• At the top center of the window, you can choose the size of the gradient.
• At the top right, there is a vertical 3-dots menu. Open it and click on "Capture Screenshot". Your gradient will automatically be saved as a .png image.

For undoing or reverting changes you've made, just click either on the back or forward button of your browser.