Search within TutorialsPark

CSS3 Gradients


Use CSS3 gradients(linear and radial) to blend multiple colors smoothly to create great effects.


CSS3 Gradients

1. With CSS3 gradients you can create smooth transitions from one color to another and create great effects for backgrounds etc, without having to use images.

2. The Advantage of using gradients is that, its easier to scale, change the color scheme, no download time and bandwidth usage, also gradients can be made dynamic using javascript.

The Syntax for CSS3 linear-gradient property is.

linear-gradient: (direction/angle , color-stop-1, color-stop-2, color-stop-3....) ;

Tables: CSS3 Gradients(both linear and radial) Property

Property Description
linear-gradient() Horizontal offset, a positive value positions the shadow to the right and a negative value positions shadow to the left.
radial-gradient() Vertical offset, a positive value positions shadow at the top, negative value positions shadow at the bottom.
repeating-linear-gradient() Set the blur radius, higher the value more blur is the edge of the box.Negative value not allowed.(Optional)
repeating-radial-gradient() Sets the spread radius , positive value expands shadow in all direction, negative value contracts shadow towards the box.(Optional)


CSS3 Linear Gradients : Browser Specific Prefixes

Prefix Browser
-moz-linear-gradient() internetexplorer
-o-linear-gradient() opera
-webkit-linear-gradient() chrome firefox safari

Creating Linear Gradients

Demo: Linear Gradients

background-image:


1.You can create linear gradients using the function linear-gradient().

2. The arguments for linear gradients are:

linear-gradient(direction/angle(optional) , color-stop-1 , color-stop-2 , .....)

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:


Co-ordinates system Compass Gradient Line

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


CSS3 Gradients: Radial Gradients

radial-gradient (circle farthest-corner at 400px 75px , #fa4b2a, yellow 10%,#666);


1.You can even create Radial Gradients using CSS3 function radial-gradient()

2. Radial gradients begins at single point and then progressively spreads out in an elliptical or circular shape.

The Syntax for CSS3 radial-gradient function is.

background: radial-gradient (center, shape size, color-start, ......, color-stop);

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