BBestMint

CSS Clip-Path Generator

Pick from common shape presets or write a custom clip-path with live preview.

Choose from common shape presets — circle, ellipse, triangle, arrow, rhombus, pentagon, hexagon, star — or write your own polygon() value. The preview updates instantly and the output is ready to paste into your CSS.

Common use cases

  • Cut hero images into hexagons or angled shapes
  • Build arrow-shaped breadcrumbs and chevron banners
  • Mask cards into diamonds for feature highlights
  • Create star badges for promo callouts

Frequently asked questions

What's the browser support for clip-path?▾
All modern browsers support clip-path: polygon() / circle() / ellipse(). For SVG-based clipping, use clip-path: url(#id).
Can I animate clip-path?▾
Yes, but only between clip-paths with the same number of points — animating a triangle to a square requires both to be defined as 4-point polygons.
How do I make a custom shape?▾
Click 'custom' and edit the polygon() value directly — each pair is x% y% from the top-left.

Related tools

🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.