Page Comparison

Opaque

Variable Name	Hex tripletVariable Value	Details
`$blue-gradient`	`linear-gradient(-45deg, #253a6e, #1d5389, #146ea6, #0c85be, #059bd6)-o-linear-gradient(135deg, #253a6e, #1d5389, #146ea6, #0c85be, #059bd6);`	Blue Gradient
`$green-gradient`	`linear-gradient(-45deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2)-o-linear-gradient(135deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2)`	Green Gradient
`$dark-green-gradient`	`linear-gradient(-45deg, #9fd64d, #44873c, #2c736e, #186299, #059bd6)-o-linear-gradient(135deg, #9fd64d, #44873c, #2c736e, #186299, #059bd6)`	Dark Green Gradient

Variable Name	Hex tripletVariable Value
`$light-green-gradient`	`linear-gradient(-45deg, rgba(#9fd64d, .6), rgba(#75c170, .6), rgba(#49ab95, .6), rgba(#2297b6, .6), rgba(#0086d2, .6))` `-o-linear-gradient(135deg, rgba(#9fd64d, .6), rgba(#75c170, .6), rgba(#49ab95, .6), rgba(#2297b6, .6), rgba(#0086d2, .6))`
`$bg-blue-gradient`	`linear-gradient(-45deg, rgba(#253a6e, .93), rgba(#1d5389, .93), rgba(#146ea6, .93), rgba(#0c85be, .93), rgba(#059bd6, .93))` `-o-linear-gradient(135deg, rgba(#253a6e, .93), rgba(#1d5389, .93), rgba(#146ea6, .93), rgba(#0c85be, .93), rgba(#059bd6, .93))`
`$black-gradient`	`linear-gradient(-45deg, transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 75%, rgba(0, 0, 0, 1) 100%)`
`$black-o-linear-gradient(135deg, gradient-mobile`	`transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 75%65%, rgba(0, 0, 0, 1) 100%)`	$black-gradient-mobile

These variables are applied using the linear gradient mixin. The default angle is -45deg.

Example

Code Block

language	sass

.sample {
  @include linear-gradient(

...

$blue-gradient);
}

Output

Code Block

language	css

.sample {
  background: #253a6e;
  background: -webkit-linear-gradient(135deg,

...

 #253a6e, #1d5389, #146ea6, #0c85be, #059bd6);
  background: linear-gradient(-45deg, #253a6e, #1d5389, #146ea6, #0c85be, #059bd6);
}

...

...