effect
Thumb effect
The frosted panel on project thumbnails, a backdrop blur.
.panel {
backdrop-filter: var(--effect-thumb);
background: color-mix(in srgb, var(--base-black) calc(var(--opacity-medium) * 100%), transparent);
}When to use
- The text panel on a project thumbnail, in Thumbs and Carousel.
When not to use
- Navigation. That's the Menu effect.
Behaviour
It blurs what's behind the panel. In Figma the blur is tied to opacity/gentle, an opacity token borrowed as a blur size. It works, but changing that opacity would also move this blur. Its own blur token would fix it.
Accessibility
- Contrast: check the panel text against the busiest part of the thumbnail.
Values
Straight from the contract. Each value sits next to its token, because six tokens here all come out as #3a3a3a and the colour alone can't tell you which one is right.
Never changes
| Part | Property | Value | Token |
|---|---|---|---|
| root | backdrop-filter | blur(12px) | effect/thumb |