RizCraft Logo RizCraft

CSS Clip-Path Generator

Cut any element into a custom shape — drag the points, pick a preset, or dial in a circle, ellipse, or inset. Copy the CSS when you're done.

Presets
CSS Output

Similar CSS Tools

See All
Color Mixer
Blend two colors and see every step of the gradient between them
CSS Background Pattern Generator
Generate seamless dots, stripes, grid, and checkerboard CSS background patterns
Color Converter
Convert colors between HEX, RGB, and HSL formats instantly
Browser extension

Keep RizCraft tools one click away

Open 24 built-in tools from your browser sidebar, use quick actions from the right-click menu, and reach every RizCraft tool without hunting through tabs.

Add to Chrome Explore the extension

Firefox and Edge versions are coming next. Free to install

Free CSS Clip-Path Generator

The CSS clip-path property lets you cut an element down to any shape you like. Start from a polygon preset like a triangle, star, or speech bubble and drag the points to fine-tune it, or switch to circle, ellipse, or inset for simpler geometric crops. Toggle Hide guides to preview the clean result without the draggable handles.

The preview uses a plain gradient rather than a stock photo, so you can judge the shape itself — swap in your own background image or color once you paste the CSS into your project.

Frequently Asked Questions

Can I add or remove points from a polygon?
Yes. Click "+ Add Point" to add one near the shape's center, then drag it into place. Double-click any point to remove it (a polygon needs at least 3).
Does clip-path have good browser support?
Yes, all modern evergreen browsers support clip-path with polygon, circle, ellipse, and inset shapes unprefixed.
Does clipping affect the element's clickable area?
In most modern browsers, yes — clicks and hovers outside the visible clipped shape are ignored, which is useful for custom-shaped buttons and cards.