Tailwind Clip Path Generator

Create custom shapes with CSS clip-path for Tailwind CSS.
Get arbitrary value syntax or CSS for @layer utilities.

Select Shape

Custom Clip Path (optional)

Enter a custom clip-path value to override the preset

Tailwind Arbitrary Value

[clip-path:circle(50%_at_50%_50%)]

CSS / @layer Utilities

.clipped-element {
  clip-path: circle(50% at 50% 50%);
}

/* Or use in Tailwind @layer */
@layer utilities {
  .clip-custom {
    clip-path: circle(50% at 50% 50%);
  }
}

About Tailwind Clip-Path

Tailwind CSS doesn't have built-in clip-path utilities, but you can use arbitrary values with the bracket syntax. For reusable shapes, add custom utilities to your @layer utilities in your CSS file.

Want to extract clip-paths from any website?

Frontend Hero's CSS Scanner shows you every style property, including clip-path. Click any element, see all its styles. Done.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →