---
url: /docs/foundations/css-classes/opacity.md
---
> Effects

# Opacity

Utilities for controlling the opacity of an element.

## Quick reference

| Class | Description |
|-------|-------------|
| `opacity-0` | `opacity: 0%` |
| `opacity-25` | `opacity: 25%` |
| `opacity-50` | `opacity: 50%` |
| `opacity-75` | `opacity: 75%` |
| `opacity-100` | `opacity: 100%` |

## Basic usage

### Changing an element's opacity

Control the opacity of an element using the `opacity-{amount}` utilities.

```html
<div class="opacity-100 ...">100%</div>
<div class="opacity-75 ...">75%</div>
<div class="opacity-50 ...">50%</div>
<div class="opacity-25 ...">25%</div>
<div class="opacity-0 ...">0%</div>
```