CSS Clip Path Generator
Cut elements into triangles, hexagons, stars, arrows or your own polygon. Free, and runs entirely in your browser — nothing is uploaded.
About Clip Path Generator
Cuts an element into a shape with clip-path — triangles, polygons, stars, arrows, speech bubbles, circles, ellipses, inset rectangles with rounded corners, or a polygon you write point by point — with a live preview.
Points are percentages of the element's own box, so one clip-path works at any size: 50% 0% is always the top centre. The element keeps its full rectangular box for layout, so neighbouring content does not move — to have text flow around the shape as well, give the element the same value as shape-outside.
clip-path can be animated between two polygons with the same number of points, which is how many shape-morphing hover effects are built.
Where it helps
- Sixteen ready-made shapes plus a custom polygon.
- Percentage points scale with the element automatically.
- Checks custom points, so a typo cannot produce silently broken CSS.
- Previews at any width and height.
Limits
- Clipping hides content but not the box: clicks and hovers still register in the clipped-away corners.
- Shadows and borders are clipped too; to shadow a clipped shape, use filter: drop-shadow() on a wrapper.
- Curved shapes other than circles and ellipses need path() or an SVG clipPath, which this does not draw.
Frequently asked questions
Why is my box-shadow gone?
clip-path clips everything outside the shape, including the shadow. Put the clip-path on an inner element and filter: drop-shadow() on its parent — drop-shadow follows the clipped shape.
Can I animate between shapes?
Yes, if both are polygons with the same number of points: the browser interpolates each point. Different point counts snap instead of morphing.
How do I make text wrap around the shape?
Float the element and give it shape-outside with the same value as its clip-path; text then flows along the shape's edge.
Related tools
- Border Radius Generator — Round corners evenly, one by one, or into a blob
- SVG Path Viewer — Draw path data and read back what it contains
- Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
- CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
- Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
- Contrast Checker — WCAG contrast ratio for text and UI colours
More Colors & Design tools
- Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
- Contrast Checker — WCAG contrast ratio for text and UI colours
- Image Colour Picker — Pick a colour out of a picture and read it back
- Gradient Generator — Build linear, radial and conic CSS gradients
- Random Colour Generator — Random colours from a seed you can keep, in a range you choose
- Palette Generator — Harmonious colour schemes from a base colour
- Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
- Border Radius Generator — Round corners evenly, one by one, or into a blob
- CSS Animation Generator — Build a keyframe animation and watch it run
- Cubic Bezier Editor — Plot an easing curve and feel what it does
- Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
- Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
- Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
- Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
- Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
- Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
- Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
- Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
- CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
- Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
- Web Font Previewer — Set your own text in a font file before you ship it