Overlay

An overlay is an alpha layer that is superimposed as a top layer over the content being overlayed.

Overlay

Easily add an overlay to any element by including .overlay class.

.overlay-1

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

.overlay-2

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

.overlay-3

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

.overlay-4

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

.overlay-5

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

.overlay-6

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9

Gradients

You can opt to use gradients overlay by adding .gradient to any element.

Using .gradient-34

View all gradient variations here

Overlay text

.alpha-1

Overlay text

.alpha-2

Overlay text

.alpha-3

Overlay text

.alpha-4

Overlay text

.alpha-5

Overlay text

.alpha-6

Overlay text

.alpha-7

Overlay text

.alpha-8

Overlay text

.alpha-9