Utilities for controlling an element's effect.
Opacity
| Class | Properties |
|---|---|
.opacity-0 |
opacity: 0; |
.opacity-25 |
opacity: 0.25; |
.opacity-50 |
opacity: 0.5; |
.opacity-75 |
opacity: 0.75; |
.opacity-100 |
opacity: 1; |
Elevation
Content elevation
sm
md
lg
| Class | Properties |
|---|---|
.lift-sm |
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) |
.lift-md |
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) |
.lift-lg |
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2) |
Shape elevation
sm
md
lg
| Class | Properties |
|---|---|
.shadow-sm |
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) |
.shadow-md |
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) |
.shadow-lg |
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05) |