Linear gradient markup

background: -webkit-gradient(
linear, /* Type of gradient */
0 0, /* Left-, top- position */
0% 100%, /* Left-, top- position */
from(rgb(0,0,255)), /* Starting color */
color-stop(0.7, orange), /* specifies the location of a gradient stop and the color it has */
 to(red)); /* end color */

Radial gradient markup

background: -webkit-gradient(
radial, /* Type of gradient */
150 80, /* center location of the center of the circle */
10, /* Size of the center of the circle */
120 80, /* center location of the outside of the circle */
130, /* Size of the center of the circle */
from(rgb(255,255,255)), /* Color to the center of the gradient */
color-stop(0.5, orange), /* specifies the location of a gradient stop and the color it has -> I dont use it in my header. */
to(rgba(255,255,255, 0))); /* the end color */

As you can see in the header I don`t use the specified color-stop.

Some notes

• Location can be specified with a number and %
• Color can be specified with color name, hex, rgb and rgba

So whats the cool things you can do with this?

Button with highlight and a hover effect.

.bevelandemboss{
width: 100px;
background:
-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,255,0,0.3)), to(rgba(0,255,0,1))),
-webkit-gradient(radial, 70 70, 10, 70 70, 80, from(rgba(255, 255, 255,0)), color-stop(0.8, rgba(255, 255, 255,4)), to(rgba(50, 255, 50, 0.7)));
-webkit-border-radius:10px;
color: #333;
font-size: 1.5em;
text-align: center;
text-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
}
.bevelandemboss:hover{
background:
-webkit-gradient(linear, 0 0, 0 100%, from(rgb(0,255,0)), color-stop(0.5, rgba(0,255,0,0.5)), to(green)),
-webkit-gradient(radial, 70 70, 10, 70 70, 80, from(rgba(255, 255, 255,0)), color-stop(0.8, rgba(255, 255, 255,4)), to(rgba(100, 255, 100, 0)));
cursor: pointer;
-webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.4);
}