Handitab

CSS Clip Path Generator

Pick a shape such as a triangle, hexagon, star, arrow, or circle and get the matching CSS clip-path value with a live preview.

About CSS Clip Path Generator

The CSS clip-path property hides every part of an element that falls outside a shape. This generator offers 14 presets written with the polygon(), circle(), ellipse(), and inset() functions. Coordinates are percentages of the element box, so the shape scales with the element. Clipping does not change layout: the element keeps its original box, and shadows and outlines drawn outside the shape are cut off too.

How to use CSS Clip Path Generator

  1. Fill in "Shape", "Preview color", "Preview width" and "Preview height".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about CSS Clip Path Generator

Why did my box-shadow disappear after adding clip-path?

clip-path cuts away everything outside the shape, including the shadow. Put the clipped element inside a wrapper and apply filter: drop-shadow() to the wrapper, which follows the visible outline of the clipped child.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
CSS Cubic Bezier GeneratorSet the two control points of a cubic-bezier() easing curve, see the curve drawn, and copy the CSS transition-timing-function.CSS Gradient GeneratorGenerate a CSS linear or radial gradient from two colors and an angle with a live preview, then copy the background declaration.CSS Grid GeneratorBuild a CSS grid layout by setting columns, rows, track size, and gap with a live preview, then copy the grid-template declarations.CSS Loader GeneratorGenerate a pure CSS loading indicator (ring spinner, bouncing dots, bars, or pulse) with your size, color, and speed, and copy the code.CSS Switch GeneratorGenerate CSS for a toggle switch built on a real checkbox input, with your own width, on and off colors, and animation speed.CSS Text Glitch Effect GeneratorGenerate a CSS glitch text effect with two offset color layers and an adjustable speed, previewed on your own text, then copy the code.