CSS Masks and Clipping with clip-path: Shapes, Syntax, and Use

CSS clip-path lets you show only part of an element by clipping it to a shape. It is useful for creating circles, angled cards, cut-out sections, and other visual effects without extra images or JavaScript.

Quick answer: Use clip-path when you want to hide part of an element by defining a clipping shape. It does not resize the element; it only changes which pixels are visible.

Difficulty: Beginner

Helpful to know first: You'll understand this better if you know basic CSS selectors, the box model, and how borders, width, and height affect layout.

1. What Is clip-path?

clip-path is a CSS property that clips an element to a shape. Anything outside that shape becomes invisible, while the element itself still exists in the layout.

It creates a visible region for an element.
It works with basic shapes like circles, ellipses, rectangles, and polygons.
It can also use SVG-based clipping in some cases.
It is often used for decorative effects, image crops, and geometric layouts.

Think of it as a stencil: the element is still there, but only the part inside the stencil is shown.

2. Why clip-path Matters

clip-path gives you a clean way to build modern visual designs directly in CSS. Instead of preparing many cropped image files, you can define the visible area in code and change it responsively.

It matters because it:

reduces the need for image editing tools for simple crops
supports responsive designs that adapt to different sizes
makes it easier to create cards, badges, banners, and diagonal sections
can be animated for reveal and transition effects

Use it when you want a shape-based crop. Do not use it when you need the element to be physically smaller in layout, because clipping and sizing are different things.

3. Basic Syntax or Core Idea

The simplest way to use clip-path is to assign it a shape function.

Basic circle example

This clips an image into a circle centered on the element.

.avatar {
  width: 160px;
  height: 160px;
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);
}

The circle() function defines the clipping shape, and the at 50% 50% part centers it. The element remains 160 by 160 pixels, but only the circular area is visible.

Rectangle-like clipping with inset()

inset() clips inward from each edge.

.card {
  clip-path: inset(10px 20px 10px 20px);
}

This keeps the center visible while trimming the top, right, bottom, and left edges by different amounts.

Polygon clipping

polygon() lets you define custom points, which is useful for angled corners and diagonal shapes.

.banner {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 80%,
    0% 100%
  );
}

This example creates a shape with a slanted bottom edge by specifying four points.

4. Step-by-Step Examples

Example 1: Circular avatar

A common use of clip-path is turning a square image into a circle. The image should use object-fit: cover so the crop looks natural.

.profile-photo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  clip-path: circle(50%);
}

This creates a perfect circular crop, which is common for profile images and user cards.

Example 2: Diagonal hero section

Background sections often look more dynamic with a diagonal bottom edge. polygon() is a good fit for that.

.hero {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 90%,
    0% 100%
  );
}

The shape keeps the top edge straight and cuts the lower edge at an angle.

Example 3: Notched card corner

You can use polygon() to create cut corners or notches without images.

.ticket {
  clip-path: polygon(
    0% 10%,
    10% 0%,
    90% 0%,
    100% 10%,
    100% 90%,
    90% 100%,
    10% 100%,
    0% 90%
  );
}

This creates a ticket-style shape with clipped corners. It is useful for coupon cards, labels, and event passes.

Example 4: Revealing content with inset()

inset() is useful when you want a clean rectangular crop with rounded corners.

.panel {
  clip-path: inset(12px 12px 12px 12px round 24px);
}

The optional round keyword adds rounded clipping, which is helpful for soft UI cards and image frames.

5. Practical Use Cases

clip-path is most useful when the visible shape is part of the design. Common situations include:

round avatars and decorative image crops
angled hero sections and section separators
ticket-like or badge-like cards
hover reveals and clipped overlays
custom thumbnails in content galleries
brand shapes for promotional panels

It is especially helpful when a shape must scale with the layout, because percentage-based coordinates adjust as the element changes size.

6. Common Mistakes

Mistake 1: Using clip-path when you really need layout cropping

clip-path hides pixels, but it does not change the element's box size. Beginners often expect the clipped area to affect surrounding layout the same way a smaller element would.

Problem: The element still occupies its original space, so other layout issues remain even though part of it is invisible.

.box {
  width: 300px;
  height: 200px;
  clip-path: inset(0 150px 0 0);
}

Fix: If you need the element to take up less room, change its dimensions or use a layout technique such as overflow on a wrapper instead.

.box {
  width: 150px;
  height: 200px;
}

The corrected version works because layout size and visible shape are handled separately.

Mistake 2: Forgetting that an image may need object-fit

Clipping an image does not automatically make the image fill the shape in a pleasing way. If the source aspect ratio does not match, the result can look stretched or awkward.

Problem: Without object-fit: cover, the image may not fill the clipped area the way you expect.

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

Fix: Add object-fit: cover so the image fills the frame before clipping.

.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  clip-path: circle(50%);
}

The corrected version works because the image content is scaled to fill the square before the circle is applied.

Mistake 3: Using invalid polygon points or mismatched shapes

polygon() requires valid coordinate pairs. If the point list is malformed, the browser may ignore the clipping path or render it unexpectedly.

Problem: Missing coordinates or malformed points can cause the clipping shape not to apply correctly.

.shape {
  clip-path: polygon(0% 0%, 100% 0%, 100%, 0% 100%);
}

Fix: Make sure every point has both an x and a y value.

.shape {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

The corrected version works because the polygon contains complete coordinate pairs for each corner.

7. Best Practices

Practice 1: Use percentage values for responsive shapes

Percentages scale with the element, which makes your clipped shapes more flexible across screen sizes.

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

This approach is better than fixed pixels when the clipped element needs to adapt to different widths.

Practice 2: Keep shapes simple when possible

Simple shapes are easier to maintain and less likely to create visual glitches.

.badge {
  clip-path: circle(50%);
}

A circle is often more practical than a complex polygon if the design goal is only a round crop.

Practice 3: Test clipping with real content, not empty boxes

Some clipping shapes look fine on a blank element but hide important content when real text or images are added.

.feature {
  padding: 24px;
  background: #f3f4f6;
  clip-path: inset(0 0 12px 0 round 16px);
}

Testing with real content helps you catch clipped text, unwanted cutoffs, and poor spacing early.

8. Limitations and Edge Cases

clip-path affects visibility, not layout flow.
Older browsers may have incomplete support for some advanced clipping features.
Complex polygons can be harder to debug than simple shapes.
Text inside clipped regions may become unreadable if the clipping is too aggressive.
Focus outlines and accessibility affordances can be visually affected if the clipped area is too tight.
Percentage-based points behave relative to the element box, so resizing changes the visible shape.

If something seems like clip-path is not working, check whether the element has a visible size, whether the syntax is valid, and whether another style is overriding the property.

9. Practical Mini Project

In this mini project, you'll build a featured card with a clipped top banner and a circular author photo. This is a realistic combination of common clipping patterns.

.feature-card {
  width: 320px;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.feature-card__banner {
  height: 160px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 75%,
    0% 100%
  );
}

.feature-card__body {
  padding: 20px;
}

.feature-card__avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  clip-path: circle(50%);
}

This project combines two common uses of clipping: a decorative angled banner and a circular image crop. It is a good starting pattern for blog cards, team profiles, and landing page promos.

10. Key Points

clip-path hides parts of an element by clipping it to a defined shape.
It changes visibility, not the element's layout size.
circle(), ellipse(), inset(), and polygon() are the most common shape functions.
Percentage-based shapes are usually the most responsive choice.
Clipping is great for design effects, but it should not be used as a substitute for layout changes.

11. Practice Exercise

Try building a clipped callout panel using only CSS.

Create a .callout element with a light background.
Clip the top-right corner with polygon() or inset().
Add a small circular icon using clip-path: circle().
Make the shape work at different widths by using percentage values where possible.

Expected output: a callout card with a distinctive clipped corner and a round icon frame.

Hint: Start with a simple shape first, then adjust one point at a time until the silhouette looks right.

Solution:

.callout {
  width: 100%;
  max-width: 420px;
  padding: 20px;
  background: #eff6ff;
  clip-path: polygon(
    0% 0%,
    90% 0%,
    100% 10%,
    100% 100%,
    0% 100%
  );
}

.callout__icon {
  width: 40px;
  height: 40px;
  background: #2563eb;
  clip-path: circle(50%);
}

This solution works because the callout uses a responsive polygon, while the icon uses the simplest clipping shape for a clean circle.

12. Final Summary

clip-path is a powerful CSS feature for shaping what users can see. It is ideal for circular avatars, diagonal sections, clipped cards, and other decorative effects that need to scale with the layout.

As you use it, remember the key distinction: clipping changes visibility, not sizing. Once you keep that difference in mind, it becomes much easier to choose the right shape function and avoid common layout mistakes.

Start with simple shapes like circle() and inset(), then move to polygon() when you need custom geometry. The more you practice with real content, the more natural clipped design patterns will feel.