Glass and Border Effects
Frosted glass, gradient borders and glows for cards and hero sections. Real CSS with a live preview, ready to copy as CSS, Tailwind or HTML.
Open in editorCSS effects and layouts
CSS Clip-path Generator (Shapes, Polygons, Masks)
Cut images and sections into polygons, stars, blobs, waves, slants or speech bubbles. Copy the CSS clip-path, an SVG clipPath or Tailwind.
Open the generatorRuns right in your browser. Your graphics are made on your device.
Start from a preset
Pick a preset and it opens right in the editor, ready to adjust.
What is it?
The CSS property clip-path cuts an element into a shape. Only the part inside the shape stays visible, for example a photo as a hexagon or a hero section with a slanted lower edge. The generator draws the shape for you and writes the code.
What you can use it for
Photos and avatars
Team photos as hexagons, blobs or circles look more playful than plain rectangles.
Hero sections
A slanted or wavy lower edge makes the transition into the content more lively.
Badges and callouts
Stars, arrows and speech bubbles turn simple boxes into eye-catching labels.
How it works
Pick a shape and adjust corners, depth, side or variation. Add your own picture to see how it looks. Then copy the CSS, the SVG clipPath for smooth curves, or the Tailwind class. The image exports show the cut element as SVG, PNG or WebP.
Try the Clip-path Generator nowTips
- The CSS uses percentages. The shape therefore follows the element at any size and on every screen.
- Curves in CSS are made of many points. For very large, round shapes the SVG clipPath gives smoother edges.
- clip-path also cuts away shadows. Use filter: drop-shadow() on a parent element if the shape needs a shadow.
FAQ
- Which browsers support clip-path?
- All current browsers support clip-path with polygon(), ellipse() and url() for SVG clip paths.
- Does the clipped area still react to clicks?
- No. Clicks and hovers only count inside the visible shape, which keeps buttons and links precise.
- Can I animate the shape?
- Yes, as long as both polygons have the same number of points. Then a CSS transition blends smoothly from one to the other.
- Is my picture uploaded?
- No. Your picture stays in your browser. It is not stored on a server and never travels in a share link.
Related generators
All generators in CSS effects and layouts
Bento Grid
Rounded tiles of different sizes in a grid, without gaps. For feature sections, portfolios and social graphics, as CSS Grid, Tailwind or an image.
Open in editor
CSS Shadow Generator
Soft, layered shadows for cards and buttons. Real CSS preview, export as box-shadow, Tailwind or drop-shadow.
Open in editor
Animated Gradient Generator
Moving, rotating and color-shifting gradients and floating blobs as pure CSS. Copy CSS, Tailwind or HTML, or export PNG and GIF.
Open in editor
Fluid Type Scale Generator
Font sizes that grow with the screen width: a modular type scale as CSS clamp(), with CSS variables and a Tailwind theme to copy.
Open in editor
Section Divider Generator
Waves, arcs, slants, peaks and more as the transition between two website sections. One SVG that fits any width, with HTML and CSS to copy.
Open in editor