CSS Clip Path Generator
Pick a clip-path shape and copy the CSS, with live preview.
Shape
CSS
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);Clipping elements with clip-path
The CSS clip-path property masks an element to a shape — a polygon() defined by percentage coordinate pairs, or a circle() / ellipse(). Anything outside the path is hidden, while the element keeps its full box for layout. Pick a preset, preview it live, and copy the CSS — all client-side.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.