Free tool · copy-ready CSS
CSS Clip-path Generator
Cut images, cards and sections into any shape. Drag the points, preview on your own photo, and copy one line of CSS.
Drag the white points. Select one and use the arrow keys to nudge it.
CSS
Presets
Points
Preview
Need a designer who codes?
Get custom layouts that do not look like a template.
Angled sections, shaped images and bold layouts make a brand memorable. I design and build custom websites that load fast and work on every screen.
Popular uses for clip-path
- Angled hero sections: use "Slanted edge" on a full-width banner.
- Hexagon team photos and diamond-shaped thumbnails.
- Arrow and tag labels for prices, steps and breadcrumbs, with no images.
- Hover effects: add
transition: clip-path .3sand change the shape on hover. Both shapes need the same number of points.
Frequently asked questions
What does clip-path do?
The CSS clip-path property shows only part of an element, cut to a shape. Anything outside the shape is hidden, so you can turn a rectangular image or box into a triangle, hexagon, star or any custom polygon.
Which browsers support clip-path?
All modern browsers support clip-path with polygon(), circle() and ellipse(): Chrome, Edge, Firefox and Safari, on desktop and mobile.
How do I make my own shape?
Start from the closest preset, then drag the points. Use "Add point" for more corners, and select a point and press Delete (or "Remove point") to take one away. Arrow keys nudge the selected point; hold Shift for bigger steps.
Does clip-path affect clicks and SEO?
Clicks only register inside the visible shape. Search engines still read the content and image as normal, so clip-path is safe for SEO.
More design tools
Color Palette & Contrast Checker
Build colour palettes from one colour or a photo, and check text contrast against WCAG.
Social Share Image Maker
Design 1200×630 share images for Facebook, LinkedIn and X, plus Instagram sizes.
Image Cropper
Crop, rotate and flip images to any shape, with presets for social media.
CSS Gradient Generator
Create linear, radial and conic gradients visually and copy the CSS.
Blob & Shape Generator
Make organic blobs, stars, rounded polygons and flowers. Download SVG or PNG, or copy the CSS.
Section Divider Generator
Create wave, curve, slant and zigzag dividers between website sections, with copy-ready code.
Box Shadow Generator
Design soft, layered, glow and neumorphism shadows and copy the CSS.
CSS Button Generator
Design buttons with colours, gradients, borders and hover effects. Copy the HTML and CSS.
SVG Optimizer
Shrink SVG files from Illustrator, Figma or Inkscape, with a before and after preview.
Favicon from Text or Emoji
Make a favicon from your initials or an emoji, with ICO, SVG and PNG files.
Logo Badge & Seal Maker
Design round, shield, hexagon and seal badges with your text. Download PNG or SVG.