Our Tutorials

HTML CSS SQL

Tools

Data

JSON Validator CSV / JSON Converter HTML Formatter CSS Formatter SQL Formatter XML Formatter Markdown Preview Regex Generator

SEO

Meta tag Generator

Design

Design the Scroll bar Box Shadow Generator Border Radius Generator CSS Gradient Generator Color Converter Image Converter Encode and Decode Images

Free Online CSS Gradient Generator

Create linear or radial gradients with multiple color stops, alpha transparency, RGBA output and live preview.

Presets

Click to load

Preview

linear-gradient
Blue Code Academy Gradient preview

Controls

Type and direction
Gradient type
Radial shape

Color stops

Generated stops: 0%, 100%

CSS Code

Use as background

How CSS gradients work

A CSS gradient is an image generated by the browser. Use a linear gradient when the colors move in a direction, and use a radial gradient when the color spreads from a center point.

Color stops decide where each color appears. Moving two stops close together creates a sharp transition; moving them apart creates a softer blend. Alpha controls transparency, which is useful for overlays, fades and UI surfaces.

Copy the generated CSS and use it in the background or background-image property. Gradients are images, but thankfully they do not ask you to export another asset.

Related CSS topics