Opacity

Read about how you can use Opacity to make your content appear or disappear.

Class	Properties
o-10	opacity: 0.1;
o-20	opacity: 0.2;
o-30	opacity: 0.3;
o-40	opacity: 0.4;
o-50	opacity: 0.5;
o-60	opacity: 0.6;
o-70	opacity: 0.7;
o-80	opacity: 0.8;
o-90	opacity: 0.9;
o-100	opacity: 1;

Basic Usage

This is a paragraph with an opacity of 0.1.

This is a paragraph with an opacity of 0.2.

This is a paragraph with an opacity of 0.3.

This is a paragraph with an opacity of 0.4.

This is a paragraph with an opacity of 0.5.

This is a paragraph with an opacity of 0.6.

This is a paragraph with an opacity of 0.7.

This is a paragraph with an opacity of 0.8.

This is a paragraph with an opacity of 0.9.

This is a paragraph with an opacity of 1.

<p class="o-10">This is a paragraph with an opacity of 0.1.</p>
<p class="o-20">This is a paragraph with an opacity of 0.2.</p>
<p class="o-30">This is a paragraph with an opacity of 0.3.</p>
<p class="o-40">This is a paragraph with an opacity of 0.4.</p>
<p class="o-50">This is a paragraph with an opacity of 0.5.</p>
<p class="o-60">This is a paragraph with an opacity of 0.6.</p>
<p class="o-70">This is a paragraph with an opacity of 0.7.</p>
<p class="o-80">This is a paragraph with an opacity of 0.8.</p>
<p class="o-90">This is a paragraph with an opacity of 0.9.</p>
<p class="o-100">This is a paragraph with an opacity of 1.</p>