Interactions
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.
Wave effect
Default - Dark wave
.wave
Light wave
.white-wave
Custom color wave
.purple-wave
Nested
The children of parent element must have position relative in order to be not covered by the wave effect
.red-wave
.green-wave
<div id="graph1"></div>
Wave effect on elements
Button
Card
Header
Body
Image

List items
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<div id="graph1"></div>
Wave effect color
Red wave
.red-wave .lighter-5
.red-wave .lighter-4
.red-wave .lighter-3
.red-wave .lighter-2
.red-wave .lighter-1
.red-wave
.red-wave .darker-1
.red-wave .darker-2
.red-wave .darker-3
.red-wave .darker-4
.red-wave .alt-1
.red-wave .alt-2
.red-wave .alt-3
.red-wave .alt-4
Pink wave
.pink-wave .lighter-5
.pink-wave .lighter-4
.pink-wave .lighter-3
.pink-wave .lighter-2
.pink-wave .lighter-1
.pink-wave
.pink-wave .darker-1
.pink-wave .darker-2
.pink-wave .darker-3
.pink-wave .darker-4
.pink-wave .alt-1
.pink-wave .alt-2
.pink-wave .alt-3
.pink-wave .alt-4
Purple wave
.purple-wave .lighter-5
.purple-wave .lighter-4
.purple-wave .lighter-3
.purple-wave .lighter-2
.purple-wave .lighter-1
.purple-wave
.purple-wave .darker-1
.purple-wave .darker-2
.purple-wave .darker-3
.purple-wave .darker-4
.purple-wave .alt-1
.purple-wave .alt-2
.purple-wave .alt-3
.purple-wave .alt-4
Deep Purple wave
.deep-purple-wave .lighter-5
.deep-purple-wave .lighter-4
.deep-purple-wave .lighter-3
.deep-purple-wave .lighter-2
.deep-purple-wave .lighter-1
.deep-purple-wave
.deep-purple-wave .darker-1
.deep-purple-wave .darker-2
.deep-purple-wave .darker-3
.deep-purple-wave .darker-4
.deep-purple-wave .alt-1
.deep-purple-wave .alt-2
.deep-purple-wave .alt-3
.deep-purple-wave .alt-4
Indigo wave
.indigo-wave .lighter-5
.indigo-wave .lighter-4
.indigo-wave .lighter-3
.indigo-wave .lighter-2
.indigo-wave .lighter-1
.indigo-wave
.indigo-wave .darker-1
.indigo-wave .darker-2
.indigo-wave .darker-3
.indigo-wave .darker-4
.indigo-wave .alt-1
.indigo-wave .alt-2
.indigo-wave .alt-3
.indigo-wave .alt-4
Blue wave
.blue-wave .lighter-5
.blue-wave .lighter-4
.blue-wave .lighter-3
.blue-wave .lighter-2
.blue-wave .lighter-1
.blue-wave
.blue-wave .darker-1
.blue-wave .darker-2
.blue-wave .darker-3
.blue-wave .darker-4
.blue-wave .alt-1
.blue-wave .alt-2
.blue-wave .alt-3
.blue-wave .alt-4
Light Blue wave
.light-blue-wave .lighter-5
.light-blue-wave .lighter-4
.light-blue-wave .lighter-3
.light-blue-wave .lighter-2
.light-blue-wave .lighter-1
.light-blue-wave
.light-blue-wave .darker-1
.light-blue-wave .darker-2
.light-blue-wave .darker-3
.light-blue-wave .darker-4
.light-blue-wave .alt-1
.light-blue-wave .alt-2
.light-blue-wave .alt-3
.light-blue-wave .alt-4
Cyan wave
.cyan-wave .lighter-5
.cyan-wave .lighter-4
.cyan-wave .lighter-3
.cyan-wave .lighter-2
.cyan-wave .lighter-1
.cyan-wave
.cyan-wave .darker-1
.cyan-wave .darker-2
.cyan-wave .darker-3
.cyan-wave .darker-4
.cyan-wave .alt-1
.cyan-wave .alt-2
.cyan-wave .alt-3
.cyan-wave .alt-4
Teal wave
.teal-wave .lighter-5
.teal-wave .lighter-4
.teal-wave .lighter-3
.teal-wave .lighter-2
.teal-wave .lighter-1
.teal-wave
.teal-wave .darker-1
.teal-wave .darker-2
.teal-wave .darker-3
.teal-wave .darker-4
.teal-wave .alt-1
.teal-wave .alt-2
.teal-wave .alt-3
.teal-wave .alt-4
Green wave
.green-wave .lighter-5
.green-wave .lighter-4
.green-wave .lighter-3
.green-wave .lighter-2
.green-wave .lighter-1
.green-wave
.green-wave .darker-1
.green-wave .darker-2
.green-wave .darker-3
.green-wave .darker-4
.green-wave .alt-1
.green-wave .alt-2
.green-wave .alt-3
.green-wave .alt-4
Light green wave
.light-green-wave .lighter-5
.light-green-wave .lighter-4
.light-green-wave .lighter-3
.light-green-wave .lighter-2
.light-green-wave .lighter-1
.light-green-wave
.light-green-wave .darker-1
.light-green-wave .darker-2
.light-green-wave .darker-3
.light-green-wave .darker-4
.light-green-wave .alt-1
.light-green-wave .alt-2
.light-green-wave .alt-3
.light-green-wave .alt-4
Lime wave
.lime-wave .lighter-5
.lime-wave .lighter-4
.lime-wave .lighter-3
.lime-wave .lighter-2
.lime-wave .lighter-1
.lime-wave
.lime-wave .darker-1
.lime-wave .darker-2
.lime-wave .darker-3
.lime-wave .darker-4
.lime-wave .alt-1
.lime-wave .alt-2
.lime-wave .alt-3
.lime-wave .alt-4
Yellow wave
.yellow-wave .lighter-5
.yellow-wave .lighter-4
.yellow-wave .lighter-3
.yellow-wave .lighter-2
.yellow-wave .lighter-1
.yellow-wave
.yellow-wave .darker-1
.yellow-wave .darker-2
.yellow-wave .darker-3
.yellow-wave .darker-4
.yellow-wave .alt-1
.yellow-wave .alt-2
.yellow-wave .alt-3
.yellow-wave .alt-4
Amber wave
.amber-wave .lighter-5
.amber-wave .lighter-4
.amber-wave .lighter-3
.amber-wave .lighter-2
.amber-wave .lighter-1
.amber-wave
.amber-wave .darker-1
.amber-wave .darker-2
.amber-wave .darker-3
.amber-wave .darker-4
.amber-wave .alt-1
.amber-wave .alt-2
.amber-wave .alt-3
.amber-wave .alt-4
Orange wave
.orange-wave .lighter-5
.orange-wave .lighter-4
.orange-wave .lighter-3
.orange-wave .lighter-2
.orange-wave .lighter-1
.orange-wave
.orange-wave .darker-1
.orange-wave .darker-2
.orange-wave .darker-3
.orange-wave .darker-4
.orange-wave .alt-1
.orange-wave .alt-2
.orange-wave .alt-3
.orange-wave .alt-4
Deep Orange wave
.deep-orange-wave .lighter-5
.deep-orange-wave .lighter-4
.deep-orange-wave .lighter-3
.deep-orange-wave .lighter-2
.deep-orange-wave .lighter-1
.deep-orange-wave
.deep-orange-wave .darker-1
.deep-orange-wave .darker-2
.deep-orange-wave .darker-3
.deep-orange-wave .darker-4
.deep-orange-wave .alt-1
.deep-orange-wave .alt-2
.deep-orange-wave .alt-3
.deep-orange-wave .alt-4
Brown wave
.brown-wave .lighter-5
.brown-wave .lighter-4
.brown-wave .lighter-3
.brown-wave .lighter-2
.brown-wave .lighter-1
.brown-wave
.brown-wave .darker-1
.brown-wave .darker-2
.brown-wave .darker-3
.brown-wave .darker-4
Bue grey wave
.blue-grey-wave .lighter-5
.blue-grey-wave .lighter-4
.blue-grey-wave .lighter-3
.blue-grey-wave .lighter-2
.blue-grey-wave .lighter-1
.blue-grey-wave
.blue-grey-wave .darker-1
.blue-grey-wave .darker-2
.blue-grey-wave .darker-3
.blue-grey-wave .darker-4
Grey wave
.grey-wave .lighter-5
.grey-wave .lighter-4
.grey-wave .lighter-3
.grey-wave .lighter-2
.grey-wave .lighter-1
.grey-wave
.grey-wave .darker-1
.grey-wave .darker-2
.grey-wave .darker-3
.grey-wave .darker-4
Black & White wave
.black-wave
.white-wave
<div id="graph1"></div>
Hover basic
Light hover
.hover .hover-light
Dark hover
.hover
Shadow hover
.hoverable
Flat hover
.hover-flat
Flat Light hover
.hover-flat .hover-light
<div id="graph1"></div>
Hover transform
Scale Up



Scale Down



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



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



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