Basic Gradients

(see the code)

linear-gradient ( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

<side-or-corner> = [to left | to right] || [to top | to bottom]

radial-gradient ( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list>);

conic-gradient ( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

Linear Vertical
Linear Horizontal
Linear Diagonal
Multi-coloured
Linear Transparent
Linear Full-stop
Linear Angled Stops
Linear 0°
Linear 90°
Linear 180°
Linear 270°

Radial
Gradients

Radial Gradient
Radial Circle
Radial Closest Side
Radial Top-Right
Radial Positioned
Radial Multiples
Repeating Radial

Conic
Gradients

Conic Gradient
Color Wheel
Pie Chart
Repeating Conic

Shapes and Patterns from Gradients

A Solid Circle
A Half Circle
Angular Sections

The 15° gradients cut across the bottom left and bottom right corners. The background color shows the full size of the gradient area.

A Cylinder Highlight
Vertical Stripes
Horizontal Stripes
Diagonal Stripes
Arrow Right
Arrow Left
Arrow Down
Arrow Up
Diagonal Line
A Button
A Bordered Circle
Ellipses
A Triangle