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?

Related Tools

Design System Generator

Turn two or three brand colors into semantic design tokens with live previews and CSS, Tailwind, SCSS, and JSON exports.

CSS Box Shadow Generator

Generate CSS box-shadow values with visual controls, live preview, and one-click copy.

Favicon Generator

Generate all favicon sizes from a single image, including ICO, Apple Touch Icon, and PWA icons.

Color Picker

Pick colors visually, sync HEX/RGB/HSL values, and extract dominant palettes from uploaded images.

JSON Formatter

Format and validate JSON quickly with clean output and errors.

Base64 Encode/Decode

Convert plain text to Base64 and back in one panel.

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