What it does
ColorBeta is a free editor for layered CSS backgrounds. It combines linear, radial and conic gradients with colour stops, blending, size and position controls. A code view and permalink let you use or revisit a composition.
Add a layer with the plus button, choose its gradient type and select its thumbnail to edit it. Drag layers to change their order. Semi-transparent upper layers or a blend mode let lower gradients contribute to the result.
A colour stop can have both a start and an end position. Extending blue from 0% to 50%, for example, holds that colour before the blend begins. Matching one stop’s end to the next stop’s start produces a sharp stripe. For a repeating gradient, reduce the distance between the first and last stops.
The code control copies CSS, and a permalink preserves the composition for later editing. Browser Back and Forward provide undo and redo. There is no direct image-download option; the FAQ describes capturing a screenshot from browser developer tools instead.
Strengths
- Layers can be reordered, duplicated or edited individually.
- Start and end positions support both smooth transitions and solid stripes.
Watch out for
- A gradient cannot be downloaded directly as an image.
- Background positioning only becomes visible for a smaller, custom-sized, non-repeating background.
Best for
- Web designers building layered gradients or repeating CSS patterns.
Sources
- ColorBeta - Advanced CSS Gradient Generator (Oct 28, 2026)
- How to use ColorBeta? (Oct 28, 2026)
- About ColorBeta (Oct 28, 2026)