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-primary
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-secondary
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-success
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-danger
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-warning
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-info
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-light
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-dark
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-link
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-alternate
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-contrast
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-darker
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-black
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-blue-purple

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