DevToolBox

✂️ CSS Clip-Path Generator

Create custom shapes with CSS clip-path

Shape Type

Presets

Configuration

Format: polygon(x y, x y, ...)

Preview

Generated CSS

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

Browser Support

Modern browsers (Chrome, Firefox, Safari, Edge)
Use -webkit-clip-path for older Safari versions

Note: For maximum compatibility, consider including both clip-path and -webkit-clip-path properties.