Create custom CSS clip-path shapes visually. Drag points to customize polygons, circles, and complex shapes.
Draw custom CSS clip-path shapes by dragging polygon points on a visual canvas. Supports polygon, circle, ellipse, and inset shapes with live preview and ready-to-copy CSS.
Initializing in your browser…
Create custom border radius with individual corner control, linked/unlinked mode, px/% units, interactive corner sliders on preview, and 12 shape presets
Create custom CSS keyframe animations visually. Add keyframes, adjust timing, and preview animations in real-time.
Create stunning CSS gradients with linear/radial/conic types, angle control, position control, multiple color stops, 11 presets, and reverse/randomize features
Draw custom CSS clip-path shapes by dragging polygon points on a visual canvas. Supports polygon, circle, ellipse, and inset shapes with live preview and ready-to-copy CSS.
Polygon, circle, and ellipse clip-paths are well-supported in all modern browsers including Chrome, Firefox, Safari, and Edge.
No. The element occupies the same space in the layout, only its visible area changes.
All processing happens directly in your browser. Your files never leave your device and are never uploaded to any server.