Opacity utilities

Utility classes which can be used to set the opacity of elements.

Notation #

The utility classes for setting the opacity come in the format: .opacity-{value}, where the {value} can be a percentage of 100, 75, 50, or 25. It can also be 0 (which would make the element invisible). These classes are shown in action in the example below.

100%
75%
50%
25%
0%
HTML 
<!-- Opacity 100% -->
<div class="opacity-100">100%</div>

<!-- Opacity 75% -->
<div class="opacity-75">75%</div>

<!-- Opacity 50% -->
<div class="opacity-50">50%</div>

<!-- Opacity 25% -->
<div class="opacity-25">25%</div>

<!-- Opacity 0 (invisible) -->
<div class="opacity-0">0%</div>
Up next
Overflow utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.