What it does
CSS Gradient is a free browser editor for linear and radial backgrounds. It exposes hex and RGBA values, stop positions and a linear angle beside the generated CSS. The site also provides gradient swatches, colour shades and code references.
Choose a linear or radial blend, then enter the colours and stop positions. The alpha input allows a colour to be partly transparent. For a linear gradient, changing the angle changes its direction across the element.
Copy the background declarations into the relevant CSS rule. The visible output includes a solid fallback before the gradient. A separate maximum-compatibility option is available for older-browser code.
The site’s linear-gradient reference explains how direction and positions affect the result. That makes the editor useful for checking the relationship between a visual adjustment and its CSS values.
Strengths
- Colour, transparency and position controls sit beside the CSS
- Prepared swatches provide another starting point
Best for
- Preparing CSS backgrounds while learning how their stops behave
Sources
- CSS Gradient editor (Oct 27, 2026)
- CSS Gradient linear-gradient reference (Oct 27, 2026)