CSS clip-path & Border Radius Generator Online Free
Cut geometric shapes out of any element without images: polygons for triangles and hexagons, circles and ellipses for avatars, and wild border-radius stacks for organic blobs. Drag preset shapes or fine-tune vertex sliders, watch a live preview morph in real time, then copy the finished clip-path (or border-radius) declaration straight into your stylesheet. Percentage-based shapes stay responsive at every viewport size.
CSS clip-path & Border Radius Generator In-Browser Workspace
Input data or select files to begin. 100% private, client-side execution with zero server transmission.
How to Use CSS clip-path & Border Radius Generator
- Step 1: Choose a shape family: polygon, circle/ellipse, inset, or blob border-radius.
- Step 2: Pick a preset (triangle, hexagon, diamond, leaf…) or start from scratch.
- Step 3: Adjust vertex percentage sliders or radius fields; the preview updates instantly.
- Step 4: Toggle fill-rule or border-radius shorthand mode to match your target browser set.
- Step 5: Copy the CSS snippet — a single clip-path or border-radius line — into your project.
About CSS clip-path & Border Radius Generator
clip-path paints an element only inside a chosen region; everything outside is invisible. The polygon() function takes a comma-separated list of x/y point pairs in percentages (responsive) or absolute units — polygon(50% 0%, 100% 100%, 0% 100%) is a classic triangle pointing up because the apex sits mid-top and the base spans full width. circle() and ellipse() use a radius (optionally at a position): circle(50% at 50% 50%) clips a centered circular mask — great for avatar images with object-fit: cover underneath. inset() carves rectangular corners with optional rounding, similar to border-radius but as a clip region. Border-radius accepts one to four slash-separated values per corner (TL TR BR BL); stacked layers like 60% 40% 30% 70%/60% 30% 70% 40% produce the fashionable asymmetric blob look used on hero cards. Percentage radii resolve against the element’s own width and height, which is why the same numbers look different on non-square boxes. The generator keeps every point in 0–100 range, orders polygon vertices along the outline to avoid self-intersecting bow-ties, and can nudge points for smooth approximations (hexagon = six evenly spaced angles, star = alternating radii). Clipping happens on the GPU during compositing; it does not affect layout — the element still occupies its original box, so pair with margin/width tweaks when you need the layout to match the visual silhouette. Accessibility note: decorative clip shapes are CSS-only and do not change reading order; keep alt text on clipped images.
Frequently Asked Questions
Do clipped elements still take up their original space?
Yes — clip-path is visual only; adjust width/height/margins if layout should follow the shape.
Are percentage points responsive?
Yes — percentages scale with the element size, so shapes stay proportional across breakpoints.
Does clip-path work in older browsers?
Polygon/circle/inset are supported in all modern browsers; very old Edge/IE need SVG or -webkit- fallbacks.
What is the difference between clip-path and overflow: hidden?
overflow clips to the border box; clip-path clips to any geometry you define, including diagonal edges.
Can I animate the shape?
Yes — interpolating between polygons with the same vertex count animates smoothly with CSS transitions.