Documentation

Search value is required

Angled gradients

full screen new window example

Examples of angled gradients generated using brand colours

Usage

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

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

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

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

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

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

@include linear-gradeint(to top right, colour(purple) 40%, colour(yellow));