home

CSS3 Gradients

CSS3 gradients let you display smooth transitions between two or more specified colors. Css3 gradient allows you to apply gradients (combination of multi colors) for an element without any graphics. Before css3, we had to use images for gradients which created in graphic tools (Photoshop, CorelDraw).

Advantages:-

Css3 has 2 types of Gradients:-

Css3 Linear Gradient

You can also set a starting point and a direction (or an angle) along with the gradient effect.
Simplification about gradients, colors combination called gradients; we have many examples about linear gradients.

Linear Gradient Top Bottom

<div id="Top_Bottom"></div>
#Top_Bottom {
height: 250px;
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}

Css3 Linear Gradient

You can also set a starting point and a direction (or an angle) along with the gradient effect.
Simplification about gradients, colors combination called gradients; we have many examples about linear gradients.

Linear Gradient Left Right

<div id="Left_Right"></div>
#Left_Right {
height: 250px;
background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */
}

Linear Gradient with Even Stops

<div id="Event"></div>
#Even {
background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}

Linear Gradient with Specified Arbitrary Stops

<div id="Arbitrary"></div>
#Arbitrary {
  background: -webkit-linear-gradient(180deg, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(180deg, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg, red, yellow); /* Standard syntax */
}

Linear Gradient with Multiple colors

<div id="Multi_Colors"></div>
#Multi_Colors {
    height: 200px;
    background: -webkit-linear-gradient(red, orange, yellow, green, indigo, violet); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, orange, yellow, green, indigo, violet); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, orange, yellow, green, indigo, violet); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, orange, yellow, green, indigo, violet); /* Standard syntax (must be last) */
}

Radial Gradients

This defined by its center, also multiple colors combination called Radial Gradient.

Radial Gradient Centered, Full Size

<div id="Radial_Center"></div>
#Radial_Center {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(red, yellow, white,  green); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(red, yellow, white,  green); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(red, yellow, white, green); /* For Fx 3.6 to 15 */
    background: radial-gradient(red, yellow, white, green); /* Standard syntax (must be last) */
}