Skip to content

Instantly share code, notes, and snippets.

@leepettijohn
Created June 27, 2015 18:32
Show Gist options
  • Save leepettijohn/45d8fc934886a5dc0959 to your computer and use it in GitHub Desktop.
Save leepettijohn/45d8fc934886a5dc0959 to your computer and use it in GitHub Desktop.
Gradients
// linear-gradient([direction], [stop] [% or px], <[stop] [% or px]>+)
// background: linear-gradient(left, rgba(255,0,0,0), red 50px, blue 100px, blue 200px, green );
#linear-grad {
//top to bottom
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}
#grad {
//left to right
background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment