Colour Gradients The Scss Way
open-source class generator

Download on GitHub


Vertical bottom


Horizontal right


Source code


<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.


$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.

How to use it

Navigate to the "SCSS" folder and open up the "colours.scss" file. In here you will find eight colour variables that contain HEX values, change these to suit your own branding and recompile your SCSS framework. If you wish to add or completely change a colour you will need to either add or name change all instances featured in, "colours.scss" and "colourClasses.scss".