Pill Material
Explore translucent pills with adjustable opacity and blur.
Adjust the material
Background opacity · 50%
Backdrop blur · 16px
Pill position · 50%
Background opacity changes the surface color without fading the pill’s label. Backdrop blur softens only the content behind it. Move the pill or scroll inside a preview to compare edges and readability. Try the site’s light and dark themes too.
Scroll beneath the pill
Scroll the page: this pill stays below the site header while each type of content passes behind it. The sliders above control its material.
Image
Regular text
A translucent surface lets the content beneath it remain visible. Notice how letters lose their sharp edges as blur increases, while opacity determines how much of their contrast reaches the surface. Scroll this panel to see the material pass over each line of text.
Page title
Ideas become interfaces.
Math equation
Lines
Table
| Material | Appearance |
|---|---|
| Clear | Sample 1 |
| Frosted | Sample 2 |
| Opaque | Sample 3 |
| Tinted | Sample 4 |
Over different content
A translucent surface lets the content beneath it remain visible. Notice how letters lose their sharp edges as blur increases, while opacity determines how much of their contrast reaches the surface. Scroll this panel to see the material pass over each line of text.
Ideas become interfaces.
| Material | Appearance |
|---|---|
| Clear | Sample 1 |
| Frosted | Sample 2 |
| Opaque | Sample 3 |
| Tinted | Sample 4 |
Compare combinations
Each column increases opacity; each row increases blur. All nine previews use the same image, so only the material changes.