# Opacity

Set the opacity for an element.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 1 · Edge 12 · Firefox 1 · Safari 2

| Class | Properties | Value |
|-------|------------|-------|
| `o:0` | opacity | `0` |
| `o:10` | opacity | `.1` |
| `o:20` | opacity | `.2` |
| `o:30` | opacity | `.3` |
| `o:40` | opacity | `.4` |
| `o:50` | opacity | `.5` |
| `o:60` | opacity | `.6` |
| `o:70` | opacity | `.7` |
| `o:80` | opacity | `.8` |
| `o:90` | opacity | `.9` |
| `o:100` | opacity | `1` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `o:0` | opacity | `0` |
| `o:10` | opacity | `.1` |
| `o:20` | opacity | `.2` |
| `o:30` | opacity | `.3` |
| `o:40` | opacity | `.4` |
| `o:50` | opacity | `.5` |
| `o:60` | opacity | `.6` |
| `o:70` | opacity | `.7` |
| `o:80` | opacity | `.8` |
| `o:90` | opacity | `.9` |
| `o:100` | opacity | `1` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `o:0` | opacity | `0` |
| `o:10` | opacity | `.1` |
| `o:20` | opacity | `.2` |
| `o:30` | opacity | `.3` |
| `o:40` | opacity | `.4` |
| `o:50` | opacity | `.5` |
| `o:60` | opacity | `.6` |
| `o:70` | opacity | `.7` |
| `o:80` | opacity | `.8` |
| `o:90` | opacity | `.9` |
| `o:100` | opacity | `1` |