CSS clip-path Property

CSS clip-path Property

The clip-path property in CSS clips an element into a specific shape, making only part of it visible. It allows you to create creative cutout effects, masks, and custom shapes.

1. Syntax

selector {
  clip-path: value;
}

Value Type	Example	Description
none	clip-path: none;	No clipping (default).
Basic Shapes	clip-path: circle(50% at center);	Clips to a shape like a circle, ellipse, or polygon.
SVG Path	clip-path: url(#clipPathID);	Uses an external SVG <clipPath> for clipping.
Inset Box	clip-path: inset(20px 30px);	Creates a rectangular cutout with margins.

2. Example – Clipping an Image into a Circle

img {
  clip-path: circle(50%);
  width: 200px;
}

✅ Cuts the image into a perfect circle.

3. Example – Clipping an Element into a Polygon

div {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: orange;
  width: 200px;
  height: 200px;
}

✅ Creates a triangular shape.

4. Example – Using clip-path: inset() for Box Clipping

div {
  clip-path: inset(10px 20px 30px 40px);
  background: blue;
  width: 300px;
  height: 150px;
}

✅ Crops the box from the top, right, bottom, and left.

5. Example – Using clip-path with SVG

<svg width="0" height="0">
  <clipPath id="customClip">
    <circle cx="50" cy="50" r="40" />
  </clipPath>
</svg>

<img src="image.jpg" style="clip-path: url(#customClip);">

✅ Uses an SVG clip-path for advanced clipping.

6. Best Practices

✔ Use CSS Shapes for performance-friendly clipping.
✔ For complex shapes, use SVG clip-path.
✔ Use clip-path for hover effects and animations.
✔ Test on different browsers, as some values have limited support.