Clipping

Understanding the clip-path Property

The clip-path property creates a clipping region that determines what part of an element should be shown. Everything outside this region is hidden from view, enabling developers to break free from the traditional rectangular constraints of web elements.

Unlike masking, which can apply graduated transparency, clipping creates a binary result--content is either fully visible or completely hidden. This makes clip-path ideal for creating sharp, defined shapes that maintain the clean visual style expected in modern web design.

The property has evolved significantly since the deprecated clip property, now offering a rich set of shape functions and SVG integration capabilities that make complex shapes achievable with pure CSS.

Basic Syntax

At its core, clip-path accepts a shape function that defines the clipping geometry. The basic syntax follows this pattern:

.element {
 clip-path: <shape-function>(<parameters>);
}

The none value removes any clipping, making the element fully visible. Shape functions can include optional positioning using the at keyword, followed by coordinates specified as lengths, percentages, or position keywords like center, top, left, etc.

Shape Functions

CSS provides five primary shape functions for clip-path, each suited to different design needs. Understanding these functions enables you to create everything from simple circular avatars to complex custom polygons.

circle()

The circle() function creates circular clipping regions with a specified radius and optional position.

/* Circle with radius at center */
.element {
 clip-path: circle(50% at center);
}

/* Circle with specific radius at offset position */
.element {
 clip-path: circle(100px at 25% 25%);
}

ellipse()

Ellipse() creates oval shapes by specifying horizontal and vertical radii independently.

/* Ellipse filling the element */
.element {
 clip-path: ellipse(50% 30% at center);
}

inset()

The inset() function clips to a rectangle, with values representing offsets from each edge.

/* Inset from all edges */
.element {
 clip-path: inset(10px 20px 30px 40px);
}

/* Inset with rounded corners */
.element {
 clip-path: inset(10% round 20px);
}

polygon()

The polygon() function offers the most flexibility, allowing you to define custom multi-point shapes. Each vertex is specified as an (x, y) coordinate pair.

/* Triangle */
.element {
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Pentagon */
.element {
 clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* Star */
.element {
 clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

path()

The path() function uses SVG path syntax directly, providing the most precise control over complex shapes.

.element {
 clip-path: path('M 10 10 L 90 10 L 50 90 Z');
}

Animating clip-path

One of clip-path's most powerful features is its ability to animate between shapes, creating engaging hover effects and transitions. For smooth animations, ensure shapes are compatible--polygons must have the same number of vertices, and circle/ellipse values must animate between comparable parameters.

/* Hover effect with clip-path transition */
.element {
 clip-path: circle(30% at center);
 transition: clip-path 0.3s ease;
}

.element:hover {
 clip-path: circle(50% at center);
}

Animating clip-path is particularly effective for interactive user interfaces where visual feedback enhances user engagement.

SVG Clip Paths

Beyond CSS shapes, clip-path can reference SVG clipPath elements. This approach supports more complex geometries and combines multiple shapes using SVG's full feature set.

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

<style>
.element {
 clip-path: url(#myClip);
}
</style>

This technique is especially valuable when building dynamic web applications that require precise shape manipulation.

Common Use Cases

Section Dividers

Create angled or curved dividers between sections without using images:

/* Angled section divider */
.section-divider {
 clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Cards and UI Components

Give cards unique shapes for visual distinction:

.card {
 clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

Image Hover Effects

Create engaging hover transitions:

.gallery-item {
 clip-path: circle(40% at center);
 transition: clip-path 0.4s ease;
}

.gallery-item:hover {
 clip-path: circle(50% at center);
}

Performance and Best Practices

• Test animations on lower-end devices to ensure smooth performance
• Use compatible shapes when animating between clip-path values
• Remember accessibility -- clipped content remains in the DOM and accessible to screen readers
• Prefer simpler shapes (circle, ellipse) for better rendering performance
• Use percentages for responsive clip-path values that adapt to container sizes
• Consider will-change sparingly for frequently animated clip-path properties

When implementing advanced CSS techniques like clip-path, balancing visual impact with performance is essential for creating fast, responsive websites.

Sources

1. web.dev - Paths, Shapes, Clipping, and Masking
2. CSS-Tricks - clip-path
3. MDN Web Docs - clip-path