HTML

<div class="pf-red-600-bg pf-red-500-gradient-horizontal-right"></div>

Creating gradients is super easy and only requires one class to enable a colour to fade out to transparent or two classes to blend into another.

SCSS

$pf-color-brand-red-500: #F44336;

$pf-color-brand-red-50:  tint($pf-color-brand-red-500, 90%);
$pf-color-brand-red-100: tint($pf-color-brand-red-500, 70%);
$pf-color-brand-red-200: tint($pf-color-brand-red-500, 50%);
$pf-color-brand-red-300: tint($pf-color-brand-red-500, 30%);
$pf-color-brand-red-400: tint($pf-color-brand-red-500, 10%);
$pf-color-brand-red-500: $pf-color-brand-red-500;
$pf-color-brand-red-600: shade($pf-color-brand-red-500, 10%);
$pf-color-brand-red-700: shade($pf-color-brand-red-500, 20%);
$pf-color-brand-red-800: shade($pf-color-brand-red-500, 30%);
$pf-color-brand-red-900: shade($pf-color-brand-red-500, 40%);
  

The "colours.scss" file containes the variables that allow you to define your base colours which will be used to contruct the palettes. Each palette uses a tint and shade mixin that allows you to adjust how much white or black is applied to the swatch.