CSS Gradient Generator

How to Use

Choose a gradient type (linear, radial, or conic), adjust the direction, and set your colour stops. The preview updates in real-time. Click Copy CSS to get the property value for your stylesheet. Click any preset to start from a predefined gradient.

CSS Gradient Syntax

A CSS linear gradient follows the pattern: background: linear-gradient(angle, colour1 pos1, colour2 pos2). Radial gradients use radial-gradient(circle, ...) and conic gradients use conic-gradient(from angle, ...). All modern browsers support these without vendor prefixes.