Opacity
Use opacity utilities to control how transparent an element is. Values range from fully opaque (opacity-100) to fully transparent (opacity-0).
Basic example
Section titled “Basic example”Use opacity-<number> utilities like opacity-25 and opacity-100 to set the opacity of an element:
Style('bg-indigo-500 opacity-100 ...')Style('bg-indigo-500 opacity-75 ...')Style('bg-indigo-500 opacity-50 ...')Style('bg-indigo-500 opacity-25 ...')Class reference
Section titled “Class reference”| Class | Description |
|---|---|
opacity-0 | Set opacity to 0 |
opacity-5 | Set opacity to 0.05 |
opacity-10 | Set opacity to 0.1 |
opacity-15 | Set opacity to 0.15 |
opacity-20 | Set opacity to 0.2 |
opacity-25 | Set opacity to 0.25 |
opacity-30 | Set opacity to 0.3 |
opacity-40 | Set opacity to 0.4 |
opacity-50 | Set opacity to 0.5 |
opacity-60 | Set opacity to 0.6 |
opacity-70 | Set opacity to 0.7 |
opacity-75 | Set opacity to 0.75 |
opacity-80 | Set opacity to 0.8 |
opacity-90 | Set opacity to 0.9 |
opacity-95 | Set opacity to 0.95 |
opacity-100 | Set opacity to 1 |