HeronTool
English▾
Log in
EnglishEnglish 中文Chinese 繁體中文Chinese (Traditional) EspañolSpanish FrançaisFrench DeutschGerman PortuguêsPortuguese ItalianoItalian РусскийRussian العربيةArabic 日本語Japanese 한국어Korean हिन्दीHindi Bahasa IndonesiaIndonesian Tiếng ViệtVietnamese ไทยThai TürkçeTurkish PolskiPolish
Home › Design Resources › Clip-Path Generator

Clip-Path Generator

Generate CSS clip-path shapes and copy the code.

Clip Path CSS Generate

How to Use

  1. Pick a shape
  2. Adjust the size
  3. Copy the clip-path CSS

Use Cases

Creative image masks and UI shapes.

Processed locally in your browser; nothing is uploaded.

Comment / Report / My Annotations

Please sign in first — Log in

Please sign in first — Log in

Please sign in first — Log in

Related Tools
Gradient Generator Generate linear/radial CSS gradients with live preview. Gradient Font Previewer Type text and switch font family to preview live. Font Icon Finder Search Tabler line icons and copy their SVG in one click. Icon Color Palette Build a harmonious palette (analogous/complementary) from a base color. Palette Mockup Generator Drop a URL or a screenshot into a device mockup frame for preview. Mockup Contrast Checker Check WCAG contrast of text on background. Contrast Box Shadow Visually build CSS box-shadow. Shadow Text Shadow Build CSS text-shadow. Shadow