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.

Preview
HTML

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>

Preview
HTML

Wave effect on elements

Button

Card

Header

Body

Footer

Image

List items

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros


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

Preview
HTML

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>

Preview
HTML

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>

Preview
HTML

Hover transform

Scale Up

Scale Down


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

Preview
HTML

Hover filter


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

Preview
HTML

Hover effects


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