About ColorBeta

What is ColorBeta ?

ColorBeta is a free online tool for generating and editing CSS gradients.


  • Linear, radial and conic gradients.
  • Intuitive addition, deletion and editing of color stops.
  • Stack multiple gradients on top of each other (like layers in Photoshop).
  • Reverse or modify all gradient colors at once (hue, saturation, lightness, opacity).
  • Blend modes for mixing different gradient layers to create a unique result.
  • Background editing options to create complex patterns.
  • Gradient repeat option.
  • Access to various color interpolation methods (not compatible with Firefox).
  • Permalink to share a gradient, save it or edit it later.


How to use 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.

Is ColorBeta Free ?


Is it possible to overlay multiple gradients?

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.

How to download the gradient as an image?

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.
How To Undo / Redo in ColorBeta?

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


Do you have any questions or suggestions?