Cacher is the code snippet organizer for pro developers

<!-- Transparent Gradients -->



<div class="box">

</div>

<style>

/* transparent rgba(255,255,255,0) */

html{
	height:100%;
}

body {
	background: -webkit-linear-gradient(hsl(195,51%,44%), rgba(255,255,255,0) 75%),
	            url('bg.jpg');
	            background-size:cover;
}

</style>

<!-- Radial Gradients -->


<div class="box">

</div>

<style>

/* Prefixed Syntax  
<position> , <shape> <size>

Unprefixed Syntax
<shape> <size> at <position> 
*/

.box {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	margin: 35px auto;

	/* nice ball */
	background: -webkit-radial-gradient(65% 15%, circle, aqua, darkblue); 


    /* circle or eliptical shape inside out - 150px horizontal begin left 50px begin top*/
	background: -webkit-radial-gradient(150px 50px, circle, orange, darkblue); 

	/* closest-side fromm center  */
	background: -webkit-radial-gradient(circle closest-side, orange, darkblue); 

	/* farthest-corner from the center  */
	background: -webkit-radial-gradient(75% 25%, circle farthest-corner, orange, darkblue); 

/* closest-side - farthest-side - farthest-corner - closest-corner 
   how big the ending shape will be */



/* Unprefixed Syntax  */

    background: -webkit-radial-gradient(30% 15%, circle farthest-side, orange, darkblue); 
    background: -moz-radial-gradient(30% 15%, circle farthest-side, orange, darkblue); 
    background: -o-radial-gradient(30% 15%, circle farthest-side, orange, darkblue); 
    background: radial-gradient(30% 15%, circle farthest-side at 30% 15%, aqua, darkblue); 

    /* background: radial-gradient(circle at top, aqua, darkblue); */ 

}
</style>

<!-- Linear gradients -->


<div class="box">

</div>

<style>

/* Prefixed Syntax  */

.box {
	width: 500px;
	height: 500px;
	margin: 35px auto;

    /*counter clock wise */

    /* top to bottom */
	background: -webkit-linear-gradient(orange, darkblue); 

	/* orange bottom */
	background: -webkit-linear-gradient(bottom, orange, darkblue); 

	/* orange bottom right*/
	background: -webkit-linear-gradient(bottom right, orange, darkblue); 
    
     /* orange left to right*/
	background: -webkit-linear-gradient(0deg, orange, darkblue);

	/* bottom to top*/
	background: -webkit-linear-gradient(90deg, orange, darkblue); 

    /* 50% location of the gradient 50% of 100% (on the middle) */
	background: -webkit-linear-gradient(orange, darkblue, green 50%, purple); 

    /* position 20px from top */
	background: -webkit-linear-gradient(orange, darkblue, green 20px, purple); 



/* Unprefixed Syntax  */

    background: -webkit-linear-gradient(bottom, orange, darkblue); 
    background: -moz-linear-gradient(bottom, orange, darkblue); 
    background: -o-linear-gradient(bottom, orange, darkblue); 
    background: linear-gradient( to bottom, orange, darkblue);

    } 

</style>

<!-- Repeating Gradients -->



<div class="box">

</div>

<style>

/* look like curtains -smoother effect - make the last color same as first one */

.box {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	margin: 35px auto;


    /* horizontal from top to bottom - 50px color stop */
    background: -webkit-repeating-gradient(rgba(58,122,187,.8), rgb(43,79,115) 50px); 

    /* horizontal from top to bottom - 50px color stop - smooth */
    background: -webkit-repeating-gradient(rgba(58,122,187,.8) 20px, rgb(43,79,115) 50px, rgba(58,122,187,.8) 70px); 

    /* vertical from left to right - 50px color stop - smooth */
    background: -webkit-repeating-gradient(left, rgba(58,122,187,.8) 20px, rgb(43,79,115) 50px, rgba(58,122,187,.8) 70px);

	/* diagonal  */
	background: -webkit-repeating-gradient(-45deg, rgba(58,122,187,.9) 2%, rgb(43,79,155) 9%, rgba(58,122,187,.9) 11%); 



     /* Radial Repeating Gradients */


	  /* small radial */
    background: -webkit-repeating-radial-gradient(rgba(108,144,188,.8), rgb(75,113,160) 20px, rgba(108,144,188,.8) 60px); 

    /* large radial */
    background: -webkit-repeating-gradient(0 0, circle, rgba(108,144,188,.8), rgba(75,113,160, .85) 100px); 

    /* vertical from left to right - 50px color stop - smooth */
    background: -webkit-repeating-gradient(left, rgba(58,122,187,.8) 20px, rgb(43,79,115) 50px, rgba(58,122,187,.8) 70px);

	/* diagonal  */
	background: -webkit-repeating-gradient(-45deg, rgba(58,122,187,.9) 2%, rgb(43,79,155) 9%, rgba(58,122,187,.9) 11%); 
}

</style>