Ivy Background with CSS3 Demonstrations of Gradients

For Header (above):
background-image: linear-gradient(to right, rgba(255, 255, 240, 0.01),rgba(255, 255, 240, 1) 25%,rgba(255, 255, 240, 1) 75%,rgba(255, 255, 240, .01) );

b3
background-image : linear-gradient(to bottom right, #336600,rgba(51, 204, 0, .3) 50%, #33FF00) ;

b4
background-image : linear-gradient(to bottom left, #336600,rgba(51, 204, 0, .3) 50%, #33FF00) ;

b5
background-image : linear-gradient(to top, #336600,rgba(51, 204, 0, .3) 50%, #33FF00) ;

background:radial-gradient(ellipse closest-side, rgba(255, 255, 240, 1.0),rgba(255, 255, 240, 0.9) 50%,rgba(255, 255, 240, 0.8)75%, rgba(255, 255, 240, 0.6)80%,rgba(255, 255, 240, 0)) ;

b1
position:relative;
display: inline-block;
background-image: linear-gradient(to right,#336600, #33FF00 15%,#33FF00 85%,#336600);

CSS Syntax

background: radial-gradient(shape size at position, start-color, ..., last-color);

Value Description

shape Defines the shape of the gradient. Possible values: ellipse (default) circle

size Defines the size of the gradient. Possible values: farthest-corner (default) closest-side closest-corner farthest-side

position Defines the position of the gradient. Default is "center"

start-color, ..., last-color Color stops are the colors you want to render smooth transitions among.
This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).