Opacities

Add an opacity to any element using our handy opacity classes. Available opacities range from 10% to 90% in 10% increments. Perfect for image overlays or anything you want to be semi-tranparent. Classes are named: .opacity-{percentage} where percentage is the number value.

As an example, for an element with 10% opacity, use .opacity-10.

10% Opacity

.opacity-10

20% Opacity

.opacity-20

30% Opacity

.opacity-30

40% Opacity

.opacity-40

50% Opacity

.opacity-50

60% Opacity

.opacity-60

70% Opacity

.opacity-70

80% Opacity

.opacity-80

90% Opacity

.opacity-90

Background Color Opacity

Three background-color opacity classes are available, at 25%, 50%, and 75%. Add .bg-opacity-{color}-25 for a 25% opaque background color. These classes use the color black by default.

10% Opacity

.bg-opacity-black-25

10% Opacity

.bg-opacity-black-50

10% Opacity

.bg-opacity-black-75