Modern CSS Clip-path Effects

Cut images and blocks into polygons, circles, stars and waves, and animate between the shapes.

1Circle Reveal

Shows a circular window of an image that opens to the full picture on hover or keyboard focus. Class: fx-circle-reveal

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <a href="#" class="d-inline-block" aria-label="Open project"><img src="../assets/img/photo-3.svg" alt="Project cover revealed in a circle" class="fx-circle-reveal object-fit-cover" style="width:220px;height:150px"></a>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-circle-reveal { -webkit-clip-path: circle(36% at 50% 50%); clip-path: circle(36% at 50% 50%); transition: clip-path .7s cubic-bezier(.6, 0, .2, 1); }
.fx-circle-reveal:hover, .fx-circle-reveal:focus-visible, :focus-visible > .fx-circle-reveal { -webkit-clip-path: circle(75% at 50% 50%); clip-path: circle(75% at 50% 50%); }
@media (prefers-reduced-motion: reduce) {
  .fx-circle-reveal, .fx-circle-reveal::before, .fx-circle-reveal::after, .fx-circle-reveal *, .fx-circle-reveal *::before, .fx-circle-reveal *::after { animation: none !important; transition: none !important; }
}

2Wave Animation

Gives the bottom edge of a hero image or header a gently rolling wave. Class: fx-wave-animation

Your next career starts here

Wavy bottom edge

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <div class="fx-wave-animation w-100 text-white p-4 pb-5" style="max-width:19rem;background:linear-gradient(135deg, var(--wt-primary), var(--wt-secondary))">
    <h3 class="h5 fw-bold mb-1">Your next career starts here</h3>
    <p class="small mb-3 opacity-75">Wavy bottom edge</p>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-wave-animation { -webkit-clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 80.3%, 87.5% 78%, 81.3% 80.3%, 75% 86%, 68.8% 91.7%, 62.5% 94%, 56.3% 91.7%, 50% 86%, 43.8% 80.3%, 37.5% 78%, 31.3% 80.3%, 25% 86%, 18.8% 91.7%, 12.5% 94%, 6.3% 91.7%, 0 86%); clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 80.3%, 87.5% 78%, 81.3% 80.3%, 75% 86%, 68.8% 91.7%, 62.5% 94%, 56.3% 91.7%, 50% 86%, 43.8% 80.3%, 37.5% 78%, 31.3% 80.3%, 25% 86%, 18.8% 91.7%, 12.5% 94%, 6.3% 91.7%, 0 86%); animation: fx-wave-animation-wave 4s ease-in-out infinite alternate; }
@keyframes fx-wave-animation-wave { from { -webkit-clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 80.3%, 87.5% 78%, 81.3% 80.3%, 75% 86%, 68.8% 91.7%, 62.5% 94%, 56.3% 91.7%, 50% 86%, 43.8% 80.3%, 37.5% 78%, 31.3% 80.3%, 25% 86%, 18.8% 91.7%, 12.5% 94%, 6.3% 91.7%, 0 86%); clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 80.3%, 87.5% 78%, 81.3% 80.3%, 75% 86%, 68.8% 91.7%, 62.5% 94%, 56.3% 91.7%, 50% 86%, 43.8% 80.3%, 37.5% 78%, 31.3% 80.3%, 25% 86%, 18.8% 91.7%, 12.5% 94%, 6.3% 91.7%, 0 86%); } to { -webkit-clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 91.7%, 87.5% 94%, 81.3% 91.7%, 75% 86%, 68.8% 80.3%, 62.5% 78%, 56.3% 80.3%, 50% 86%, 43.8% 91.7%, 37.5% 94%, 31.3% 91.7%, 25% 86%, 18.8% 80.3%, 12.5% 78%, 6.3% 80.3%, 0 86%); clip-path: polygon(0 0, 100% 0, 100% 86%, 93.8% 91.7%, 87.5% 94%, 81.3% 91.7%, 75% 86%, 68.8% 80.3%, 62.5% 78%, 56.3% 80.3%, 50% 86%, 43.8% 91.7%, 37.5% 94%, 31.3% 91.7%, 25% 86%, 18.8% 80.3%, 12.5% 78%, 6.3% 80.3%, 0 86%); } }
@media (prefers-reduced-motion: reduce) {
  .fx-wave-animation, .fx-wave-animation::before, .fx-wave-animation::after, .fx-wave-animation *, .fx-wave-animation *::before, .fx-wave-animation *::after { animation: none !important; transition: none !important; }
}

3Inset Expand

A rounded inner window that expands to the full image edge when hovered. Class: fx-inset-expand

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <img src="../assets/img/photo-6.svg" alt="Card image with an expanding frame" class="fx-inset-expand object-fit-cover" style="width:220px;height:150px">
</div>

/* CSS (already in assets/css/effects.css) */
.fx-inset-expand { -webkit-clip-path: inset(12% 12% 12% 12% round 1.5rem); clip-path: inset(12% 12% 12% 12% round 1.5rem); transition: clip-path .6s cubic-bezier(.2, .8, .2, 1); }
.fx-inset-expand:hover, .fx-inset-expand:focus-visible { -webkit-clip-path: inset(0 0 0 0 round 0); clip-path: inset(0 0 0 0 round 0); }
@media (prefers-reduced-motion: reduce) {
  .fx-inset-expand, .fx-inset-expand::before, .fx-inset-expand::after, .fx-inset-expand *, .fx-inset-expand *::before, .fx-inset-expand *::after { animation: none !important; transition: none !important; }
}