Opacity

Control the opacity of elements.

Opacity

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent.

Set the opacity of an element using .opacity-{value} utilities.

Where value is one of: 10,10,30,40 to 100

100% opacity
80% opacity
50% opacity
20% opacity
 

Background Opacity

Set the opacity of a background color using bg-opacity-{value} utilities.

Where value is one of: 5,10,15,20 to 100

5% background opacity
10% background opacity
15% background opacity
20% background opacity
 
80% background opacity
85% background opacity
90% background opacity
100% background opacity

Text Opacity

Set the opacity of a text color using text-opacity-{value} utilities.

Where value is one of: 5,10,15,20 to 100

5% text color opacity
10% text color opacity
15% text color opacity
20% text color opacity
 
80% text color opacity
85% text color opacity
90% text color opacity
100% text color opacity