How to Create CSS Clip-Path Shapes (Polygons, Circles, Custom Paths)
The CSS clip-path property lets you create non-rectangular shapes by clipping elements to polygons, circles, ellipses, or custom paths. Instead of memorizing coordinate syntax, visual clip-path editors let you draw shapes directly over images and instantly generate clean CSS code. This guide shows you how to create custom shapes for modern web design using a free online tool.
Step 1: Open the Clip-Path Maker
Go to fixie.tools/clip-path and upload an image or use the default preview to see your clip-path effect in real-time. The tool works with any element - images, backgrounds, or container divs.
Step 2: Choose a Base Shape or Start Custom
Select from preset shapes like triangle, hexagon, star, or custom polygon. For circles and ellipses, use the circular shape option. Or start with a blank polygon and click to add points for completely custom shapes.
Step 3: Adjust Points Visually
Drag corner points directly on the preview to reshape your clipping mask. Add new points by clicking on edge midpoints. Remove points by selecting and pressing delete. The tool shows coordinates as percentages (0-100%) for responsive design.
Step 4: Fine-Tune with Numeric Input
For precise alignment, use the coordinate input fields to enter exact percentage values. Enable snap-to-grid for consistent spacing. Use inset values if you need to clip from edges with specific offsets.
Step 5: Copy the Generated CSS
The tool generates clean CSS code in real-time as you edit. Copy the clip-path property and paste it into your stylesheet. The output includes fallbacks for older browsers and works with any HTML element.