Gradients

Eye-catching gradients


How we use gradients

  • Do not to use two gradient sections touching each other.
  • Do not use the same gradient twice in a row.
  • Do not set any long pieces of text on top of a gradient background.

Pink to blue

There are two ways of applying this gradient:

  • Add the class .gg-u-gradient-pink-to-blue to your element.

or

  • Use the @include gradient-pink-to-blue; mixin.

Pink to blue gradient

A link to nowhere

Yellow to pink

There are two ways of applying this gradient:

  • Add the class .gg-u-gradient-yellow-to-pink to your element.

or

  • Use the @include gradient-yellow-to-pink; mixin.

Yellow to pink gradient

A link to nowhere

Blue to yellow

There are two ways of applying this gradient:

  • Add the class .gg-u-gradient-blue-to-yellow to your element.

or

  • Use the @include gradient-blue-to-yellow; mixin.

Blue to yellow gradient

A link to nowhere

Rainbow

There are two ways of applying this gradient:

  • Add the class .gg-u-gradient-rainbow to your element.

or

  • Use the @include gradient-rainbow; mixin.

Rainbow gradient

A link to nowhere