Using Gradients

Gradients can be a real pain. Slate comes with seven mixins for common gradients for quickly adding to your elements.

Before working with the gradients, you should set the colors to be used within the _config-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

Default Usage

.gradient {
  @include gradient-horizontal;
}

Custom Usage

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

Vertical

Default Usage

.gradient {
  @include gradient-vertical;
}

Custom Usage

.gradient {
  @include gradient-vertical($tertiary, darken($tertiary, 10%), 0%, 30%);
}

Directional

Default Usage

.gradient {
  @include gradient-directional;
}

Custom Usage

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

Radial

Default Usage

.gradient {
  @include gradient-radial;
}

Custom Usage

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

Striped

Default Usage

.gradient {
  @include gradient-striped;
}

Custom Usage

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

Horizontal (3 colors)

Default Usage

.gradient {
  @include gradient-horizontal-three-colors;
}

Custom Usage

.gradient {
  @include gradient-horizontal-three-colors($primary, $secondary, 40%, $tertiary);
}

Vertical (3 colors)

Default Usage

.gradient {
  @include gradient-vertical-three-colors;
}

Custom Usage

.gradient {
  @include gradient-vertical-three-colors($primary, $secondary, 40%, $tertiary);
}

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.