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.

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.

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.

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.