CSS Clip Path Generator

Free

Visually create CSS clip-path polygon and circle values

Pick a shape — the box shows the real clip-path. Copy the CSS and apply it to any element or image.

Triangle
Triangle down
Triangle left
Triangle right
Trapezoid
Parallelogram
Rhombus
Pentagon
Hexagon
Heptagon
Octagon
Nonagon
Decagon
Bevel
Rabbet
Arrow right
Arrow left
Point right
Point left
Chevron
Star
Cross
Message
Frame
Circle
Ellipse
Inset (rounded)

About CSS Clip Path Generator

The clip-path property lets you crop elements into polygons, circles, and custom shapes, but writing the coordinate values by hand is guesswork without a live preview. This generator lets you create clip-path polygon and circle values visually, so you shape the clip interactively and copy exact CSS.

Drag points or adjust the shape and the tool outputs the corresponding clip-path declaration to paste into your stylesheet. It's great for angled section cuts, masked images, and non-rectangular cards. The tool is free, runs instantly in your browser without an account, and produces standard CSS clip-path values that work natively, no images or extra libraries needed.

Common uses

  • Create angled or diagonal section cuts with a polygon clip-path
  • Crop images into circles or custom shapes without editing the image
  • Design non-rectangular cards and containers visually
  • Generate precise clip-path coordinates without hand-calculating points

How to use

  1. 1

    Configure options

    Set your preferences using the options panel below.

  2. 2

    Click Generate

    Click the process button to generate your result instantly.

  3. 3

    Copy or download

    Copy the result to clipboard or download it directly to your device.

Why ToolHub?

  • Instant generation
  • Copy-ready output
  • No login required

FAQ

What clip shapes does it support?

It builds clip-path values such as polygons and circles, which you shape visually and copy as CSS.

Is the output standard CSS?

Yes. It generates a clip-path declaration you can paste straight into your stylesheet, with no extra dependencies.

Does clip-path work in all browsers?

Modern browsers support clip-path well. Check your target browser coverage if you need to support older versions.

Can I use CSS Clip Path Generator on mobile?

Yes — ToolHub is fully responsive and works on iPhone, Android, tablets and all modern browsers. No app install needed.