CSS
Gradient
Generator

Generate CSS gradient code for linear, radial, and conic gradients with live preview and color stops.

Gradient Type

Presets

Color Stops

0%
100%

Settings

Angle: 90deg
Repeating

Preview

CSS Output

Learn more

How do linear, radial, and conic gradients work — and what are design tokens?

Was this useful?

Frequently Asked Questions

Use the linear-gradient() or radial-gradient() CSS function and specify at least two color stops. For example, background: linear-gradient(to right, #FF0000, #0000FF) creates a horizontal red-to-blue gradient.

A linear gradient transitions colors along a straight line at a specified angle. A radial gradient transitions colors outward from a central point in a circular or elliptical shape.

Use multiple background values with the image as the second layer: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0)), url(image.jpg). The gradient renders on top of the image.

CSS Gradient Generator - Linear, Radial & Conic Gradients | ToolsCanvas