CSS clip-path Property

What You’ll Learn

The clip-path property clips elements to custom shapes — circles, polygons, inset boxes, and SVG paths — for creative layouts and visual effects.

Definition and Usage

The clip-path CSS property is a powerful tool that lets you create complex shapes and clip an element to a specific region. You can hide parts of an element or create interesting visual effects by defining its visible area.

You can use basic shapes like circle(), ellipse(), polygon(), and inset(), or reference custom SVG paths. Unlike the legacy clip property, clip-path works on most elements without requiring absolute positioning.

📝 Syntax

The syntax for clip-path varies depending on the shape or path you want to use:

selector {
  clip-path: shape | url(svg-path) | none;
}

Basic Example

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

Syntax Rules

• The initial value is none (no clipping).
• Shape functions: circle(), ellipse(), polygon(), inset(), path().
• url(#id) references an SVG <clipPath> element in the document.
• Coordinates in polygon() are pairs of x y percentages or lengths.
• Works on block elements, images, and pseudo-elements in modern browsers.

💎 Property Values

The clip-path property accepts shape functions, SVG references, or none.

Common Shape Functions

Examples Gallery

Try a circular clip, triangle polygon, inset crop, and ellipse shape on gradient blocks.

<style>
  .clip-circle {
    width: 200px;
    height: 200px;
    clip-path: circle(50%);
    background: linear-gradient(135deg, #f97316, #ec4899);
  }
</style>

<div class="clip-circle"></div>

<style>
  .triangle {
    width: 160px;
    height: 140px;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: #6366f1;
  }
</style>

<div class="triangle"></div>

<style>
  .inset-card {
    width: 200px;
    height: 140px;
    clip-path: inset(10% 15% round 12px);
    background: linear-gradient(90deg, #0ea5e9, #8b5cf6);
  }
</style>

<div class="inset-card"></div>

<style>
  .oval {
    width: 220px;
    height: 140px;
    clip-path: ellipse(45% 50% at 50% 50%);
    background: linear-gradient(135deg, #16a34a, #059669);
  }
</style>

<div class="oval"></div>

clip-path vs clip

💡 Best Practices