3. The direction(or angle) of gradient is an optional argument, if nothing is specified the direction is from top-to-bottom by default.

CSS Example : linear-gradient() function

Give it a TRY! » Note:linear-gradient property is supported on latest versions of all major browsers, so upgrade or use vendor prefixes

Creating Lineat gradients in horizontal direction

background-image:

1.To create gradients along the horizontal direction, we need to specify the direction as an argument,
using a keyword denoting the
direction to which gradient should head.

2. Eg: to right or to left

Example: CSS linear-gradient() horizontal direction

Give it a TRY! » Note:linear-gradient property is supported on latest versions of all major browsers, so upgrade or use vendor prefixes

Creating Gradients along a Diagonal(using keywords)

background-image:

1.You can even create a gradient along a diagonal using the CSS
linear-gradient() function, by specifying with a keyword the direction to which the gradient should head
.

Eg: to top left , to bottom right

Example: CSS linear-gradient along a diagonal

Give it a TRY! » Note:linear-gradient property is supported on
latest versions of all major browsers, so upgrade or use vendor prefixes

CSS3 Gradients: Linear gradients along any angle

background-image:

1.You can create linear gradients along any angle by specifying the angle along which the gradient must be created.
CSS angles follows the Co-ordinates system of a Compass.

2. The angle is created from the centre of the gradient box,
and the gradient moves along both directions of the center, positive values means clockwise direction and
negative values means anti-clockwise direction.

3. Out of the range angles are automatically converted by browser within the range of 0deg to 360deg.

Example: CSS linear-gradients at an angle

Give it a TRY! » Note:linear-gradient property is supported on
latest versions of all major browsers, so upgrade or use vendor prefixes

CSS3 Repeating Linear Gradients

background-image:

1.Just like simple gradients you can create repeating linear gradients with
stop points, after which the gradients repeat itself using CSS function
repeating-linear-gradient() function.

Example: CSS repeating-linear-gradient

Give it a TRY! » Note:linear-gradient function is supported on
latest versions of all major browsers, so upgrade or use vendor prefixes

center: Specififes the position of the center
of the gradient expressed in length or percentage units.The
Default position is center.(Optional)

shape:To set the shape of the gradient as a circle
or an ellipse.(Optional)

size : To set the size or extent of the radial gradient.(Optional)
Possible values are

closest-side

farthest-side

closest-corner

farthest corner

color-start : To set the color at the start of the gradient ray.

color-stop : To set the color at the end of the gradient ray.

Example: CSS radial-gradient simple

Give it a TRY! » Note:radial-gradient function is supported on
latest versions of all major browsers, so upgrade or use vendor prefixes

Creating Radial gradients with Specific color Stops

background-image:

1. Multiple color-stops can be placed along the gradient ray
just like linear gradients, here 0% percent denotes color at start and
100% denotes color at the end.Color stops in between must be within 0% and 100%

Example: CSS radial-gradient with stops

Give it a TRY! » Note:radial-gradient function is supported on
latest versions of all major browsers, so upgrade or use vendor prefixes

CSS3 Radial Gradients with different sizes

background-image:

1.The size of the gradient is set using the size parameter within the
radial-gradient() function.

The values it can assume are:

closest-side : The gradient's(both circle and ellipse) outer edge meets the side of the gradient box closest to the center.

farthest-side : The gradient's(both circle and ellipse) outer edge meets the side of the gradient box farthest to the center

closet-corner : The gradient's(both circle and ellipse) outer edge passes through the corner of the gradient box closest to the center.

farthest-corner : The gradient's(both circle and ellipse)
outer edge passes through the corner of the gradient box farthest from the center.(The default value)

Example: CSS radial-gradient sizes

Give it a TRY! » Note:radial-gradient function is supported on
latest versions of all major browsers, so upgrade or use vendor prefixes

CSS3 Repeating Radial Gradients

background-image:

1.Just like simple gradients you can create repeating radial gradients with
stop points, after which the gradients repeat itself using CSS function
repeating-radial-gradient() function.

Example: CSS repeating-radial-gradients()

Give it a TRY! » Note:radial-gradient function is supported on
latest versions of all major browsers, so upgrade or use vendor prefixes