CSS Gradient Generator - Create Linear, Radial & Conic Gradients

Gradient controls

Choose a gradient type, tune its direction, then edit color stops and positions.

Linear direction

DirectionAngle 120degAngle input

Color stops

Add, remove, reorder, and position each gradient stop.

Color 1CSS colorPosition

Color 2CSS colorPosition

Sample presets

Load common gradient starting points for UI backgrounds, buttons, and cards.

Preview and CSS

Inspect the gradient, fallback color, summary, and copy-ready CSS output.

Gradient type: linear-gradient
Color stops: 2
Output length: 113 chars
Fallback color: #2563EB

CSS snippet

.gradient {
  background-color: #2563EB;
  background-image: linear-gradient(120deg, #2563EB 0%, #7C3AED 100%);
}

Gradient value

linear-gradient(120deg, #2563EB 0%, #7C3AED 100%)

Gradient generated locally.

Build CSS gradients for production stylesheets

Use visual controls to create browser-ready gradient syntax while keeping fallback colors and editable stops visible.

Linear gradients

Linear gradients move along an angle or named direction. They are common for buttons, banners, dividers, and layered background effects.

Radial gradients

Radial gradients expand from a position using a circle or ellipse. They work well for soft highlights, cards, empty states, and ambient UI surfaces.

Conic gradients

Conic gradients rotate color around a center point. Use them for rings, meters, charts, badges, and decorative borders when browser support fits your audience.

Color stops

Each stop combines a CSS color and a percentage. Stops can be uneven to make sharper transitions, soft blends, or distinct bands.

Fallback color

The generated snippet includes a fallback background color from the first valid stop before the gradient image declaration.

CSS background usage

Copy the full CSS block for stylesheets, the gradient value for custom properties, or the inline snippet for quick prototypes.

CSS Gradient Generator FAQ

What is the difference between linear, radial, and conic gradients?

Linear gradients blend along a line, radial gradients spread outward from a point, and conic gradients rotate around a center.

Can I use HEX, RGB, or HSL colors?

Yes. The color stops reuse the DevCoreTools color parser, so common CSS color formats are validated and normalized locally.

Why include a fallback background color?

A fallback color gives older browsers, print styles, and loading states a usable background before the gradient image is applied.

Are my gradient colors uploaded?

No. Gradient generation, validation, previewing, copying, and downloads run in the current browser tab.