Tailwind CSS

For Tailwind CSS v4, shape-morph ships a pre-built utility stylesheet. Import it alongside Tailwind and use clip-{shape} classes directly, no JavaScript is needed.

Setup

Import the stylesheet in your CSS entry point:

@import "tailwindcss";
@import "shape-morph/tailwind.css";

Usage

Apply clip-* utility classes to any element:

<img
  src="/photo.jpg"
  class="clip-heart hover:clip-circle transition-[clip-path] duration-300"
/>

All 35 Material Design 3 shapes are available as clip-* utilities (e.g. clip-circle, clip-heart, clip-diamond, clip-cookie-9-sided). Since every shape produces a polygon() with the same number of vertices, CSS transitions between any two shapes work seamlessly.

Available classes

How it works

The stylesheet contains @utility directives, the preferred way for Tailwind v4 to define custom utilities in CSS. Each utility sets clip-path to a pre-computed polygon() value. Because this is pure CSS, it works with all Tailwind features like responsive prefixes, hover states, and transitions.

For programmatic access or morphing between shapes, see the CSS Clip-Path guide.