Using Gradients

Gradients can be a real pain. Slate comes with seven mixins for common gradients, allowing you to quickly add them to your elements.

Before working with the gradients, you should set the colors to be used within the _settings.colors.scss file:

$gradient-start: $primary;
$gradient-middle: darken($primary, 20%);
$gradient-end: darken($primary, 40%);

You can then make use of the following seven mixins:

Horizontal

@include gradient-horizontal;
@include gradient-horizontal($tertiary, darken($tertiary, 10%), 0%, 30%);

Horizontal (3 Colors)

@include gradient-horizontal-three-colors;
@include gradient-horizontal-three-colors($primary, $secondary, 50%, $tertiary)

Vertical

@include gradient-vertical;
@include gradient-vertical($tertiary, darken($tertiary, 10%), 0%, 50%);

Vertical (3 Colors)

@include gradient-vertical-triple;
@include gradient-vertical-three-colors($tertiary, $secondary, 50%, $tertiary);

Directional

@include gradient-directional;
@include gradient-directional($tertiary, darken($tertiary, 10%), 45deg);

Radial

@include gradient-radial;
@include gradient-radial($tertiary, lighten($tertiary, 30%));

Striped

@include gradient-striped;
@include gradient-striped($tertiary, 75deg);