Blobs, polygons, arrows and reveal masks, all in one property.
`clip-path` turns a rectangle into any shape you can describe, and `mask-image` does the same with a gradient so the edge can be soft. The animatable case is the useful one: interpolating between two polygons with the same number of points gives you a reveal that no amount of transform work can fake. Keep point counts equal or the transition snaps.
An ocean panel wipes across via clip-path to swap the label on hover.
Scrolling blue ticker whose ends dissolve into the background using mask-image.
Six-sided ocean tile cut with clip-path that spins 30° on hover.
Organic ocean blob that continuously reshapes itself through border-radius keyframes.
Coupon/ticket shape with circular bites cut from both edges — two radial masks intersected, no SVG.
Auto-scrolling list whose top and bottom dissolve into the page via mask-image — no hard cut, no wrapper gradients.
Two radial masks bite notches out of an ocean ticket, with a dashed tear line between halves.
Oversized gradient clipped to the glyphs and slid across them, with a white stop so a highlight travels through the letterforms.
Interlocking arrow segments cut with `clip-path`, the first and last squared off so the run reads as a pipeline with real ends.
Section whose bottom is scalloped by a repeating radial mask, so the wave is cut out of the element rather than covered by a shape on top.
Cover layer collapsed to a zero-radius circle on hover, revealing the surface beneath from the centre out with no opacity crossfade.
Rounded arch cut with asymmetric border-radius rather than a clip-path, so the inner keyline can follow the same curve at an inset.
Two panels cut on complementary diagonals with a deliberate gap between them, the labels nudged off-centre so neither straddles the seam.
Superellipse approximated with a 28-point clip-path, which holds its continuous curvature under scale in a way a border-radius corner visibly does not.
Radar-style wipe driven by an animated @property angle inside the mask itself, so the reveal follows a rotating wedge rather than a straight edge crossing the box.
Solid panel multiplied over a moving field so white letterforms punch straight through to it — the type is a hole, not a fill, and the colour behind keeps drifting.
Ten-point clip-path polygon over a conic fill, so the highlight sweeps around the points as the shape turns rather than rotating with them.
A grid of indigo tiles clipped to diamonds that expand into full squares on hover, revealing the whole surface.
An amber receipt card whose bottom edge is clipped into a ragged torn-paper polygon that stretches on hover.
A rose gradient masked into a heart by an inline SVG path, popping larger with a springy hover.
A hollow teal gradient frame carved with mask-composite that thickens and slides its gradient on hover.
Dark slats clipped with inset() cover half of a cyan panel; on hover they thin away in sequence like opening blinds.
A word duplicated and clipped into top and bottom halves; on hover the halves shear apart in opposite directions.
Gradient panel clipped to a six-point heraldic shield that scales up and casts a coloured drop shadow on hover.
Showing 24 of 31. Search the rest →
Waves, slants, zigzags and fades between page sections.
Duotones, colour burns, knockout text and filter stacks.
Browser chrome, phone frames, terminals and screenshot surrounds.
Reveal-on-scroll, parallax, sticky stacks and progress bars.
Fades, slides, scales and staggered list reveals.
Small confirmations: checks, likes, copies, ripples and nudges.