Gradients

Background gradient of any elements can have easily changed color, direction or start by adding its corresponding classes. The color palette is taken from material design colors.

Gradient Color

Red
HTML

.red-gradient .gradient-lighter-5

.red-gradient .gradient-lighter-4

.red-gradient .gradient-lighter-3

.red-gradient .gradient-lighter-2

.red-gradient .gradient-lighter-1

.red-gradient

.red-gradient .gradient-darker-1

.red-gradient .gradient-darker-2

.red-gradient .gradient-darker-3

.red-gradient .gradient-darker-4

.red-gradient .gradient-alt-1

.red-gradient .gradient-alt-2

.red-gradient .gradient-alt-3

.red-gradient .gradient-alt-4


<div id="graph1"></div>

Pink
HTML

.pink-gradient .gradient-lighter-5

.pink-gradient .gradient-lighter-4

.pink-gradient .gradient-lighter-3

.pink-gradient .gradient-lighter-2

.pink-gradient .gradient-lighter-1

.pink-gradient

.pink-gradient .gradient-darker-1

.pink-gradient .gradient-darker-2

.pink-gradient .gradient-darker-3

.pink-gradient .gradient-darker-4

.pink-gradient .gradient-alt-1

.pink-gradient .gradient-alt-2

.pink-gradient .gradient-alt-3

.pink-gradient .gradient-alt-4


<div id="graph1"></div>

Purple
HTML

.purple-gradient .gradient-lighter-5

.purple-gradient .gradient-lighter-4

.purple-gradient .gradient-lighter-3

.purple-gradient .gradient-lighter-2

.purple-gradient .gradient-lighter-1

.purple-gradient

.purple-gradient .gradient-darker-1

.purple-gradient .gradient-darker-2

.purple-gradient .gradient-darker-3

.purple-gradient .gradient-darker-4

.purple-gradient .gradient-alt-1

.purple-gradient .gradient-alt-2

.purple-gradient .gradient-alt-3

.purple-gradient .gradient-alt-4


<div id="graph1"></div>

Deep Purple
HTML

.deep-purple-gradient .gradient-lighter-5

.deep-purple-gradient .gradient-lighter-4

.deep-purple-gradient .gradient-lighter-3

.deep-purple-gradient .gradient-lighter-2

.deep-purple-gradient .gradient-lighter-1

.deep-purple-gradient

.deep-purple-gradient .gradient-darker-1

.deep-purple-gradient .gradient-darker-2

.deep-purple-gradient .gradient-darker-3

.deep-purple-gradient .gradient-darker-4

.deep-purple-gradient .gradient-alt-1

.deep-purple-gradient .gradient-alt-2

.deep-purple-gradient .gradient-alt-3

.deep-purple-gradient .gradient-alt-4


<div id="graph1"></div>

Indigo
HTML

.indigo-gradient .gradient-lighter-5

.indigo-gradient .gradient-lighter-4

.indigo-gradient .gradient-lighter-3

.indigo-gradient .gradient-lighter-2

.indigo-gradient .gradient-lighter-1

.indigo-gradient

.indigo-gradient .gradient-darker-1

.indigo-gradient .gradient-darker-2

.indigo-gradient .gradient-darker-3

.indigo-gradient .gradient-darker-4

.indigo-gradient .gradient-alt-1

.indigo-gradient .gradient-alt-2

.indigo-gradient .gradient-alt-3

.indigo-gradient .gradient-alt-4


<div id="graph1"></div>

Blue
HTML

.blue-gradient .gradient-lighter-5

.blue-gradient .gradient-lighter-4

.blue-gradient .gradient-lighter-3

.blue-gradient .gradient-lighter-2

.blue-gradient .gradient-lighter-1

.blue-gradient

.blue-gradient .gradient-darker-1

.blue-gradient .gradient-darker-2

.blue-gradient .gradient-darker-3

.blue-gradient .gradient-darker-4

.blue-gradient .gradient-alt-1

.blue-gradient .gradient-alt-2

.blue-gradient .gradient-alt-3

.blue-gradient .gradient-alt-4


<div id="graph1"></div>

Light blue
HTML

.light-blue-gradient .gradient-lighter-5

.light-blue-gradient .gradient-lighter-4

.light-blue-gradient .gradient-lighter-3

.light-blue-gradient .gradient-lighter-2

.light-blue-gradient .gradient-lighter-1

.light-blue-gradient

.light-blue-gradient .gradient-darker-1

.light-blue-gradient .gradient-darker-2

.light-blue-gradient .gradient-darker-3

.light-blue-gradient .gradient-darker-4

.light-blue-gradient .gradient-alt-1

.light-blue-gradient .gradient-alt-2

.light-blue-gradient .gradient-alt-3

.light-blue-gradient .gradient-alt-4


<div id="graph1"></div>

Cyan
HTML

.cyan-gradient .gradient-lighter-5

.cyan-gradient .gradient-lighter-4

.cyan-gradient .gradient-lighter-3

.cyan-gradient .gradient-lighter-2

.cyan-gradient .gradient-lighter-1

.cyan-gradient

.cyan-gradient .gradient-darker-1

.cyan-gradient .gradient-darker-2

.cyan-gradient .gradient-darker-3

.cyan-gradient .gradient-darker-4

.cyan-gradient .gradient-alt-1

.cyan-gradient .gradient-alt-2

.cyan-gradient .gradient-alt-3

.cyan-gradient .gradient-alt-4


<div id="graph1"></div>

Teal
HTML

.teal-gradient .gradient-lighter-5

.teal-gradient .gradient-lighter-4

.teal-gradient .gradient-lighter-3

.teal-gradient .gradient-lighter-2

.teal-gradient .gradient-lighter-1

.teal-gradient

.teal-gradient .gradient-darker-1

.teal-gradient .gradient-darker-2

.teal-gradient .gradient-darker-3

.teal-gradient .gradient-darker-4

.teal-gradient .gradient-alt-1

.teal-gradient .gradient-alt-2

.teal-gradient .gradient-alt-3

.teal-gradient .gradient-alt-4


<div id="graph1"></div>

Green
HTML

.green-gradient .gradient-lighter-5

.green-gradient .gradient-lighter-4

.green-gradient .gradient-lighter-3

.green-gradient .gradient-lighter-2

.green-gradient .gradient-lighter-1

.green-gradient

.green-gradient .gradient-darker-1

.green-gradient .gradient-darker-2

.green-gradient .gradient-darker-3

.green-gradient .gradient-darker-4

.green-gradient .gradient-alt-1

.green-gradient .gradient-alt-2

.green-gradient .gradient-alt-3

.green-gradient .gradient-alt-4


<div id="graph1"></div>

Light green
HTML

.light-green-gradient .gradient-lighter-5

.light-green-gradient .gradient-lighter-4

.light-green-gradient .gradient-lighter-3

.light-green-gradient .gradient-lighter-2

.light-green-gradient .gradient-lighter-1

.light-green-gradient

.light-green-gradient .gradient-darker-1

.light-green-gradient .gradient-darker-2

.light-green-gradient .gradient-darker-3

.light-green-gradient .gradient-darker-4

.light-green-gradient .gradient-alt-1

.light-green-gradient .gradient-alt-2

.light-green-gradient .gradient-alt-3

.light-green-gradient .gradient-alt-4


<div id="graph1"></div>

Lime
HTML

.lime-gradient .gradient-lighter-5

.lime-gradient .gradient-lighter-4

.lime-gradient .gradient-lighter-3

.lime-gradient .gradient-lighter-2

.lime-gradient .gradient-lighter-1

.lime-gradient

.lime-gradient .gradient-darker-1

.lime-gradient .gradient-darker-2

.lime-gradient .gradient-darker-3

.lime-gradient .gradient-darker-4

.lime-gradient .gradient-alt-1

.lime-gradient .gradient-alt-2

.lime-gradient .gradient-alt-3

.lime-gradient .gradient-alt-4


<div id="graph1"></div>

Yellow
HTML

.yellow-gradient .gradient-lighter-5

.yellow-gradient .gradient-lighter-4

.yellow-gradient .gradient-lighter-3

.yellow-gradient .gradient-lighter-2

.yellow-gradient .gradient-lighter-1

.yellow-gradient

.yellow-gradient .gradient-darker-1

.yellow-gradient .gradient-darker-2

.yellow-gradient .gradient-darker-3

.yellow-gradient .gradient-darker-4

.yellow-gradient .gradient-alt-1

.yellow-gradient .gradient-alt-2

.yellow-gradient .gradient-alt-3

.yellow-gradient .gradient-alt-4


<div id="graph1"></div>

Amber
HTML

.amber-gradient .gradient-lighter-5

.amber-gradient .gradient-lighter-4

.amber-gradient .gradient-lighter-3

.amber-gradient .gradient-lighter-2

.amber-gradient .gradient-lighter-1

.amber-gradient

.amber-gradient .gradient-darker-1

.amber-gradient .gradient-darker-2

.amber-gradient .gradient-darker-3

.amber-gradient .gradient-darker-4

.amber-gradient .gradient-alt-1

.amber-gradient .gradient-alt-2

.amber-gradient .gradient-alt-3

.amber-gradient .gradient-alt-4


<div id="graph1"></div>

Orange
HTML

.orange-gradient .gradient-lighter-5

.orange-gradient .gradient-lighter-4

.orange-gradient .gradient-lighter-3

.orange-gradient .gradient-lighter-2

.orange-gradient .gradient-lighter-1

.orange-gradient

.orange-gradient .gradient-darker-1

.orange-gradient .gradient-darker-2

.orange-gradient .gradient-darker-3

.orange-gradient .gradient-darker-4

.orange-gradient .gradient-alt-1

.orange-gradient .gradient-alt-2

.orange-gradient .gradient-alt-3

.orange-gradient .gradient-alt-4


<div id="graph1"></div>

Deep orange
HTML

.deep-orange-gradient .gradient-lighter-5

.deep-orange-gradient .gradient-lighter-4

.deep-orange-gradient .gradient-lighter-3

.deep-orange-gradient .gradient-lighter-2

.deep-orange-gradient .gradient-lighter-1

.deep-orange-gradient

.deep-orange-gradient .gradient-darker-1

.deep-orange-gradient .gradient-darker-2

.deep-orange-gradient .gradient-darker-3

.deep-orange-gradient .gradient-darker-4

.deep-orange-gradient .gradient-alt-1

.deep-orange-gradient .gradient-alt-2

.deep-orange-gradient .gradient-alt-3

.deep-orange-gradient .gradient-alt-4


<div id="graph1"></div>

Brown
HTML

.brown-gradient .gradient-lighter-5

.brown-gradient .gradient-lighter-4

.brown-gradient .gradient-lighter-3

.brown-gradient .gradient-lighter-2

.brown-gradient .gradient-lighter-1

.brown-bg

.brown-gradient .gradient-darker-1

.brown-gradient .gradient-darker-2

.brown-gradient .gradient-darker-3

.brown-gradient .gradient-darker-4


<div id="graph1"></div>

Grey
HTML

.grey-gradient .gradient-lighter-5

.grey-gradient .gradient-lighter-4

.grey-gradient .gradient-lighter-3

.grey-gradient .gradient-lighter-2

.grey-gradient .gradient-lighter-1

.grey-bg

.grey-gradient .gradient-darker-1

.grey-gradient .gradient-darker-2

.grey-gradient .gradient-darker-3

.grey-gradient .gradient-darker-4


<div id="graph1"></div>

Blue grey
HTML

.blue-grey-gradient .gradient-lighter-5

.blue-grey-gradient .gradient-lighter-4

.blue-grey-gradient .gradient-lighter-3

.blue-grey-gradient .gradient-lighter-2

.blue-grey-gradient .gradient-lighter-1

.blue-grey-gradient

.blue-grey-gradient .gradient-darker-1

.blue-grey-gradient .gradient-darker-2

.blue-grey-gradient .gradient-darker-3

.blue-grey-gradient .gradient-darker-4


<div id="graph1"></div>

Basic
HTML

.black-gradient

.white-gradient


<div id="graph1"></div>

Basic
HTML

Gradient Direction

The default gradient direction is to left available are classes .to-bottom, .to-top, .to-right. Also Responsive classes are available

.to-bottom
.to-top
.to-right

.to-bottom-sm
.to-top-sm
.to-right-sm
.to-left-sm

.to-bottom-md
.to-top-md
.to-right-md
.to-left-md

.to-bottom-lg
.to-top-lg
.to-right-lg
.to-left-lg

.to-bottom-xl
.to-top-xl
.to-right-xl
.to-left-xl

.black-gradient

.black-gradient .to-bottom

.black-gradient .to-top

.black-gradient .to-right

.black-gradient .to-right-sm .to-top-md .to-bottom-lg .to-left-xl


<div id="graph1"></div>

Basic
HTML

Gradient Start

The default gradient direction is to left available are classes .to-bottom, .to-top, .to-right. Also Responsive classes are available

.start-20
.start-40
.start-60
.start-80

.start-sm-0
.start-sm-20
.start-sm-40
.start-sm-60
.start-sm-80

.start-md-0
.start-md-20
.start-md-40
.start-md-60
.start-md-80

.start-lg-0
.start-lg-20
.start-lg-40
.start-lg-60
.start-lg-80

.start-xl-0
.start-xl-20
.start-xl-40
.start-xl-60
.start-xl-80

.black-gradient

.black-gradient .start-20

.black-gradient . start-40

.black-gradient . start-60

.black-gradient . start-80

.black-gradient .start-80 .start-sm-60 .start-md-40 .start-lg-20 .start-xl-0


<div id="graph1"></div>

Basic
HTML

Combined Gradients

With solid background

2 gradients

4 gradients

5 gradients


<div id="graph1"></div>