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
Card image cap
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

Responsive image
Responsive image
Responsive image

Scale Down

Responsive image
Responsive image
Responsive image

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

Hover filter

Responsive image
Responsive image
Responsive image

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

Hover effects

Responsive image
Responsive image
Responsive image

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