All tools

CSS Clip Path Shapes

Pre-built clip-path polygons for common shapes.

Hexagon

CSS
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

clip-path lets you mask any element to a polygon, circle, or ellipse. The element keeps its bounding box - only the visible pixels change. Hover and event areas still respect the original rectangle.

About

Pick a shape (triangle, hexagon, star, heart, arrow, message bubble, etc.). The tool shows a live preview and the matching clip-path CSS. Drop into your stylesheet to mask any element.

How to use

  1. Pick a shape.
  2. Copy the CSS.

FAQ

Does it support animation?+

Yes - if both clip-paths use the same number of points, you can transition between them. Animating between different point counts requires SVG morphing.