EN
PortuguêsEnglishEspañol
All tools
Developer tools 100% free

CSS clip-path generator

Choose a shape and drag the points in the preview to adjust it. Clip-path code in percentages works at any element size.

How to use

Thank you so much for helping!

Every donation helps pay for the servers and keeps the tools free for everyone. Pick or type an amount:

Secure payment by Stripe. Opens in a new tab.
Back to CSS and design

Crop into shapes with clip-path

Available in: PortuguêsEnglish

Advertisement

CSS clip-path generator: what it is for

Choose one of the ready-made shapes (triangle, rhombus, hexagon, pentagon, star, arrow, message, cut corners, parallelogram, circle or ellipse) and drag the points in the preview to adjust it. Coordinates are in percentages, so the crop works at any size.

Test it with your own photo and copy the ready clip-path line.

How to use

  1. Choose a shape.
  2. Drag the points to adjust and test with a photo.
  3. Copy the clip-path and use it in your CSS.

When to use it

  • Photos with different shapes on websites.
  • Sections with slanted edges.
  • Badges, arrows and bubbles with CSS only.

Frequently asked questions

What is clip-path?

It is a CSS property that shows only the part of an element inside a shape. The image stays whole in the file; only what falls outside the shape is hidden.

Does it work in every browser?

Yes. polygon(), circle() and ellipse() work in all current browsers, without prefixes.

Can I animate it?

Yes, between two polygon() shapes with the same number of points, using transition or animation on clip-path. The points move smoothly from one shape to the other.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools

Scroll reveal animation (pure CSS)Generate the effect of elements appearing as the page scrolls (scroll reveal) in pure CSS, with animation-timeline: view(): fade in, slide up, slide in from the sides, grow or unblur, with adjustable distance and scroll range, and without hiding anything in browsers that do not support it yet.Open →
CSS clamp() calculator for fluid typographyCalculate the CSS clamp() for text and spacing that grows with the screen width: enter the size on mobile and on desktop and the screen widths, and copy the value in rem, with a preview and a zoom accessibility warning.Open →
Google Fonts pairingsTry Google Fonts pairings for your website's headings and body text: pick a ready-made pair or build your own, see the preview with your text and copy the loading link and the CSS.Open →
Color contrast checker (WCAG)Check whether your text color has enough contrast with the background under the WCAG AA and AAA accessibility rules, with a live preview.Open →
Color converterConvert colors between HEX, RGB, HSL and CMYK and see lighter and darker shades.Open →
HEX color to Tailwind classFind out which color in the default Tailwind CSS (v3) palette is closest to your HEX or RGB color, with the perceptual distance and the five nearest options, or use the exact value with bracket syntax.Open →

The tools are provided as is, without warranty. We are not responsible for the results or for how they are used.