EXTERNAL - Documentation

Horizontal gradients

full screen new window example

Examples of horizontal gradients generated using brand colours

Usage

For creating a horizontal gradient, add the following as a property in your class: @include linear-gradient(to right, (COLOUR VALUE), (COLOUR VALUE));

Standard Life branded horizontal gradients start from left to right, to create gradients starting from alternative positions change the position accordingly.

@include linear-gradient(to right, colour(blue), colour(blue, alt));

@include linear-gradient(to right, colour(blue), colour(aqua));

@include linear-gradient(to right, colour(blue), colour(purple));

@include linear-gradient(to right, colour(yellow, dark), colour(yellow, alt));

@include linear-gradient(to left, colour(purple), colour(yellow, alt));