CSS Gradient Generator

Create linear, radial, and conic gradients with live preview and instant CSS output.

Gradient Type

Color Stops (click bar to add · drag to move)

Selected Stop — 0%

Hex

Position: 0%

Opacity: 100%

Direction

Custom: deg

Live Preview

CSS Output

background

background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);

background-image

background-image: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);

Preset Gradients

About CSS Gradients

Linear Gradient

Transitions colours along a straight line at a defined angle. Use linear-gradient(angle, stop1, stop2...) for directional colour flows — great for backgrounds, buttons, and headers.

Radial Gradient

Transitions colours outward from a central point in a circle or ellipse. Perfect for spotlight and glow effects, vignettes, and button hover states.

Conic Gradient

Transitions colours around a central point, like a pie chart or colour wheel. Ideal for progress indicators, decorative rings, and abstract patterns.