Scooped Containers
Three 140 px tinted-glass panels with corners scooped inwards (an 18 px quarter circle removed at each corner by clip-path: polygon()), blurred by backdrop-filter with its Safari prefix, laid over a background of crisp discs that the glass softens: the shape of tickets and cut-out coupons.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Glassmorphism has 47 effects, including 6 free. Explore the category →
3 usage examples
How it works
Each .scoop-container (140 px wide, 109 px tall with its 24/16/16 px padding, content centered in a column) is cut by clip-path: var(--scp-scoop-concave): a 28-point polygon() in calc(), seven per corner, following an 18 px radius quarter circle centered on the corner — the edge goes into the panel instead of rounding outwards. In pixels, the scoop keeps its 18 px on a 140 px panel as on a 330 px one (the ticket of the first scene). The four scoops remove 6.7% of the area; measured in Chromium 151, Firefox 153 and WebKit 26, the point 2 px from the corner does not get the click: it falls through to what lies behind.
The glass: a vertical gradient from the tint at 20% to 5% (violet, pink, cyan by :nth-child) and backdrop-filter: blur(4px) doubled with -webkit-backdrop-filter. So that there is something to blur, the .scoop-wrap wrapper carries its own background: four crisp-edged discs (violet, pink, cyan, amber, 26 to 36 px radius) over dark diagonal stripes, corners rounded at 22 px. Where a disc passes under the glass its edge turns soft; next to it, it stays sharp — that contrast is what makes the glass read. On hover, over 0.4 s, the panel rises 4 px and its tint goes to 35% → 10%; gradients do not interpolate, so the tint switches at once and only the movement is animated.
Three choices in the code are about the glass and the shape. The scooped corners are a polygon() in a CSS variable, with no SVG <clipPath> to provide (a url(#scoop-concave) with no SVG on the page would leave rectangles). The blur is also declared as -webkit-backdrop-filter, the only form Safari reads before version 18. And the glass has its own setting (.scoop-wrap, four sharp discs and stripes): over a flat color such as a demo frame's #0a0a0f, it would have nothing to blur and would just be a tinted rectangle. The texts (.sc-title, .sc-val) use var(--text-primary, #fff) and var(--text-secondary, #aaa), with a fallback value: no dependency on the site.
Accessibility
- Readability on glass: the white 12.8 px weight-700 title stays above 7:1 on dark areas, but a light disc passing behind the text drops the contrast — the risk of any glass panel. The
.sc-valvalue (10.4 px,#a1a1aa) is the most exposed. In your pages, keep bright parts of the background away from text lines (the coupon scene puts them under the edges) or raise the tint opacity to 40%. - prefers-reduced-transparency and prefers-reduced-motion: not in the code. For visitors asking for less transparency:
@media (prefers-reduced-transparency: reduce) { .scoop-container { backdrop-filter: none; -webkit-backdrop-filter: none; background: #1b1734 } }. The 4 px lift stays active under the reduced-motion preference (measured); neutralizetransformin a media query. - Keyboard and screen readers:
divs withcursor: pointer, no role and notabindex(Tab never stops on them, measured). The emojis (📈 💌 👥) are read aloud:aria-hidden="true"on.sc-icon. For a ticket to show, add a heading (h3) and anaria-labelrepeating route, time and pier.
Browser compatibility
CSS only: clip-path: polygon() with calc(), backdrop-filter and -webkit-backdrop-filter, radial and repeating gradients, custom properties. Zero JavaScript, zero SVG. The cut is measured identical in Chromium 151, Firefox 153 and WebKit 26 (corner outside the clickable area in all three). The blur is measured in Chromium (disc edges softened under the glass, sharp beside it); the headless Firefox and WebKit builds driven by Playwright render no backdrop-filter at all, even on a control page with no clip-path — a limit of the test tool, not of the effect: CSS.supports('backdrop-filter', 'blur(4px)') returns true there.
Without backdrop-filter (Firefox 70 to 102, Chrome before 76), the panel stays tinted and scooped, without blur: the discs show sharp through it. Without clip-path (Firefox before 54), the corners turn square again. In both cases the text stays in place.
The code
HTML structure to paste into your page (the CSS + JS come with Premium):
<div class="demo-preview">
<div class="scoop-wrap">
<div class="scoop-container">
<span class="sc-icon">…</span>
<span class="sc-title">…</span>
<span class="sc-val">…</span>
</div>
<div class="scoop-container">…</div>
<div class="scoop-container">…</div>
</div>
</div>The full HTML + CSS + JS of Scooped Containers, ready to paste — plus all 840 effects. Or $299 once, lifetime access.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Scoop radius (CSS — --scp-scoop-concave on .scoop-container) |
18 px, 7 points per corner | The points are r·sin(a), r·cos(a) for a = 0°, 15°… 90°: multiply them all by the same factor (×1.5 for 27 px). A scoop larger than a quarter of the height eats into the top text. |
Blur (CSS — backdrop-filter and -webkit-backdrop-filter) |
blur(4px) |
Change both lines together. 8 to 12 px for a more frosted glass: the background becomes a patch of color. The blur only works if there is detail behind. |
Glass tint (CSS — background of .scoop-container and its :nth-child) |
violet, pink, cyan at 20% → 5%; 35% → 10% on hover | Keep opacity under 45%: beyond that the panel turns opaque and the blur no longer shows. |
Background behind the glass (CSS — .scoop-wrap) |
four crisp discs over dark stripes, 22 px corners | It is a demo backdrop: in a real page, set background: none and lay the panels over your photo or illustration, as in the three scenes. |
Size (CSS — width and min-height of .scoop-container) |
140 px × 100 px minimum | Pixel scoops do not move. For a horizontal ticket: width: 330px; height: 200px. |
FAQ
clip-path: polygon(): each corner is replaced by seven points on an 18 px quarter circle whose center is the corner itself. The polygon therefore goes around the corner from the inside. border-radius can only round outwards; the other common technique, a mask made of four radial-gradients, gives smoother edges but needs four mask layers and is not as easy to read.backdrop-filter blurs what lies behind: over a flat color there is nothing to blur, and the panel is just a tinted rectangle. That is what happens over a background such as a demo frame's #0a0a0f. The crisp-edged discs show the glass at first glance; replace them with your own visual.-webkit-backdrop-filter prefix up to version 17, and still accepts it afterwards. The code therefore writes it next to the standard property. Measured in WebKit 26: CSS.supports('-webkit-backdrop-filter', 'blur(4px)') returns true.
