CSS Gradient Generator

Build gradients locally with editable stop positions, type, angle, repeating mode, live preview, and copy-ready CSS.

Type

Angle °

Repeating gradient

Preview radius

Stop 1

Stop 2

Stop 3

Stop 4

CSS

How to use this CSS Gradient Generator

Create linear, radial, conic, and repeating CSS gradients with four editable color stops and a live preview. Enter your values above and the result is calculated directly in your browser. No account is required.

Fast answer, clear inputs

This tool is built around one job: give the answer quickly without forcing a signup or hiding the result. Related tools are linked nearby when the next calculation or conversion is useful.