Web / CSS

CSS Gradient Generator

Create linear, radial and optional conic CSS gradients with color stops, angle, position and live preview. The tool generates copyable CSS code for backgrounds, cards, buttons and layout sections.

Generator

Configure gradient

All input is processed locally in your browser. No colors or code are sent to the server.

Basics

Type CSS selector Angle / start angle 135deg Radial shape Position Output

Color stops

Color 1 Position %

Color 2 Position %

Color 3 Position %

Use color 4 Position %

Options

Generate repeating gradient Include HTML example for matching output Add short CSS comment

Gradient Preview linear-gradient

CSS output

The gradient is valid.

Usage notes

Linear

Linear gradients are useful for surfaces, buttons, hero sections and subtle depth effects.

Radial

Radial gradients feel like a light source and work well on cards, overlays or background effects.

Color stops

Positions should usually be ascending. Tight stops create sharp edges, wider stops create softer transitions.