CSS clip-path: A Visual Guide with 15 Practical Examples

The clip-path property is one of the most visually powerful tools in CSS. It lets you clip an element to any shape you can define -- circles, ellipses, polygons, or even freehand SVG paths -- effectively hiding everything outside that shape. The result is crisp, resolution-independent masking that works on any element, from images to entire sections of a page.

If you have ever wondered how developers create hexagonal avatars, diagonal section dividers, or morphing shape animations without reaching for image editors, clip-path is the answer. It is also a core technique in CSS art, where every pixel matters and creative problem-solving is the whole point.

This guide walks through 15 css clip-path examples organized by shape function, each with a visual description and complete CSS you can copy into your projects today.

What Is clip-path?

The clip-path CSS property defines a clipping region for an element. Only the portion of the element inside that region is rendered; everything outside is hidden. Unlike overflow: hidden or border-radius tricks, clip-path gives you full control over the shape of the visible area.

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

That single line turns any rectangular element into a perfect circle. No wrapper elements, no pseudo-element hacks, no SVGs -- just one property.

Browser Support

clip-path with basic shapes has excellent support across all modern browsers. The path() function has broad support as well, making the full range of examples in this guide safe for production use in 2026.

Syntax Overview

The clip-path property accepts several shape functions:

• circle(radius at centerX centerY) -- creates a circular clipping region
• ellipse(radiusX radiusY at centerX centerY) -- creates an oval clipping region
• inset(top right bottom left round borderRadius) -- creates a rectangular clipping region with optional rounding
• polygon(x1 y1, x2 y2, ...) -- creates a shape from a series of coordinate points
• path('SVG path string') -- uses SVG path syntax for complex or curved shapes

Coordinates can be expressed in percentages (relative to the element) or absolute units. Percentages are the most common choice because they scale with the element.

circle() -- Circular Clipping

The circle() function is the simplest shape function and one of the most useful. It takes a radius and an optional center position.

Example 1: Circular Avatar

The most common use case. Instead of relying on border-radius: 50%, clip-path clips the image itself, which can be useful when you want to avoid overflow wrappers or when combining with other clip-path animations.

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

The element is clipped to a perfect circle centered on itself. Any content outside the circle is invisible.

Example 2: Spotlight Reveal Effect

A clip-path circle can be sized smaller than the element to create a spotlight or peephole effect, revealing only a portion of an image or background.

.spotlight {
  width: 400px;
  height: 300px;
  background: url('scene.jpg') center/cover;
  clip-path: circle(80px at 200px 150px);
  transition: clip-path 0.5s ease;
}

.spotlight:hover {
  clip-path: circle(100% at 200px 150px);
}

On hover, the spotlight expands to reveal the full image. This is a technique you will often reach for in interactive CSS challenges on StyleWars where transitions and visual flair earn extra points.

ellipse() -- Oval Clipping

The ellipse() function works like circle() but accepts separate horizontal and vertical radii, producing oval shapes.

Example 3: Oval Badge

Create a pill-shaped or oval badge without any border-radius manipulation.

.badge {
  width: 200px;
  height: 100px;
  background: #6c5ce7;
  color: white;
  display: grid;
  place-items: center;
  clip-path: ellipse(50% 50% at 50% 50%);
}

Adjusting the two radii independently lets you control how stretched the oval is. An ellipse(40% 50%) produces a narrower shape, while ellipse(50% 35%) creates a wider, flatter oval.

inset() -- Rectangular Clipping

The inset() function clips an element to a rectangle defined by offsets from each edge. It also supports a round keyword for border radii, making it surprisingly versatile for css clip-path shapes that are not strictly geometric.

Example 4: Rounded Inset Frame

Clip an image with a uniform inset and rounded corners, creating a frame-like effect.

.framed {
  clip-path: inset(8% round 16px);
}

This removes 8% from every edge and rounds the resulting rectangle with a 16px radius. It is a clean way to add visual framing without extra markup.

Example 5: Notched Corner Card

By using different inset values combined with creative rounding, you can approximate notched or cut-corner designs.

.notched-card {
  width: 300px;
  height: 200px;
  background: #2d3436;
  color: white;
  clip-path: inset(0 0 0 0 round 0 24px 0 24px);
}

This produces a card with rounded corners on the top-right and bottom-right only, giving it an asymmetric, modern look. Combined with other CSS tips for writing less code, inset() can replace several lines of border-radius declarations.

polygon() -- Multi-Point Shapes

The polygon() function is where clip-path truly shines. You define a shape by listing coordinate pairs, and the browser connects them in order. This is the workhorse behind most clip-path polygon designs.

Example 6: Triangle

A simple equilateral triangle pointing upward.

.triangle {
  width: 200px;
  height: 200px;
  background: #e17055;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Three points -- top center, bottom left, bottom right -- create a clean triangle. Adjusting the first point's horizontal position skews the triangle left or right.

Example 7: Hexagon

Hexagons are a popular design element for profile images, feature grids, and game-style interfaces.

.hexagon {
  width: 200px;
  height: 220px;
  background: #00b894;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

Six evenly spaced points produce a regular hexagon. This is one of the most commonly requested css clip-path examples and works perfectly for tiled layouts.

Example 8: Right-Pointing Arrow

An arrow shape is useful for call-to-action buttons, navigation indicators, or decorative elements.

.arrow {
  width: 250px;
  height: 100px;
  background: #0984e3;
  clip-path: polygon(
    0% 20%,
    70% 20%,
    70% 0%,
    100% 50%,
    70% 100%,
    70% 80%,
    0% 80%
  );
}

The shape is a rectangle on the left that narrows into a pointed arrowhead on the right. Changing the 70% values adjusts where the arrowhead begins.

Example 9: Five-Pointed Star

Stars require more points but follow a predictable pattern alternating between outer and inner radii.

.star {
  width: 200px;
  height: 200px;
  background: #fdcb6e;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

Ten points alternate between the tips and the inner vertices of the star. This shape is great for ratings, badges, and decorative accents.

Example 10: Speech Bubble

A speech bubble combines a rounded-looking body with a small triangular tail.

.speech-bubble {
  width: 300px;
  height: 150px;
  background: #dfe6e9;
  color: #2d3436;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 75%,
    25% 75%,
    15% 100%,
    20% 75%,
    0% 75%
  );
}

The tail extends downward from the bottom edge. You can reposition it by adjusting the three bottom points that form the triangle.

Example 11: Diagonal Section Divider

A full-width section with a diagonal bottom edge, commonly used in landing pages for visual separation between content blocks.

.diagonal-section {
  width: 100%;
  padding: 4rem 2rem 6rem;
  background: #6c5ce7;
  color: white;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

The bottom-left corner sits lower than the bottom-right, creating a diagonal slash. This is a production-ready pattern used on countless marketing sites.

Example 12: Custom Diamond

A rotated square shape created with four points, useful for decorative elements and icon backgrounds.

.diamond {
  width: 150px;
  height: 150px;
  background: #e84393;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Four points at the midpoints of each edge produce a clean diamond. This is simpler and more performant than using transform: rotate(45deg) on a square, because it does not affect the element's layout box.

path() -- SVG Path Syntax

The path() function brings the full power of SVG path commands into CSS. This is the most flexible option, allowing curves, arcs, and complex outlines that no combination of polygons can achieve.

Example 13: Heart Shape

A heart requires curves that polygon() cannot produce cleanly. The SVG path syntax handles it with cubic Bezier curves.

.heart {
  width: 200px;
  height: 200px;
  background: #e74c3c;
  clip-path: path(
    'M100 180 C40 120, 0 60, 50 30 C75 10, 100 30, 100 60 C100 30, 125 10, 150 30 C200 60, 160 120, 100 180Z'
  );
}

The C commands define cubic Bezier curves that form the two lobes and the pointed bottom of the heart. Note that path() uses pixel-based coordinates, so it does not scale automatically with the element. Set the element's dimensions to match the path's coordinate space.

Example 14: Rounded Blob

Organic, blob-like shapes are a popular design trend. SVG paths make them straightforward.

.blob {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
  clip-path: path(
    'M140,20 C180,0 200,40 190,80 C210,120 180,160 140,180 C100,200 60,180 40,140 C10,110 0,60 40,30 C70,10 110,10 140,20Z'
  );
}

By adjusting the control points of each curve, you can create endless variations of organic shapes. This technique is essential in CSS art where natural, non-geometric forms are needed.

Example 15: Wavy Bottom Edge

A section with a smooth, wavy bottom border instead of a straight or diagonal line.

.wavy-section {
  width: 100%;
  height: 400px;
  background: #00cec9;
  clip-path: path(
    'M0,0 L1440,0 L1440,320 Q1080,400 720,320 Q360,240 0,320 Z'
  );
}

The Q commands create quadratic Bezier curves that produce the wave. For responsive designs, consider using an inline SVG clipPath element referenced via clip-path: url(#id) so the path scales with the viewport.

clip-path Hover Animations

One of the most compelling features of clip-path is that it is animatable. When two clip-path values use the same shape function with the same number of points, the browser smoothly interpolates between them. This enables clip-path hover effects that morph one shape into another.

Morphing Circle to Hexagon

.morph {
  width: 200px;
  height: 200px;
  background: #e17055;
  clip-path: polygon(
    50% 0%, 100% 25%, 100% 75%,
    50% 100%, 0% 75%, 0% 25%
  );
  transition: clip-path 0.4s ease-in-out;
}

.morph:hover {
  clip-path: polygon(
    50% 5%, 93% 25%, 93% 75%,
    50% 95%, 7% 75%, 7% 25%
  );
}

Both states use polygon() with six points, so the transition is seamless. Moving the points inward on hover creates a subtle breathing or pulsing effect.

Shape Reveal on Hover

Combine a small initial clip with a full reveal for a dramatic entrance effect.

.reveal-card {
  width: 300px;
  height: 400px;
  background: url('card-image.jpg') center/cover;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-card:hover {
  clip-path: circle(100% at 50% 50%);
}

The card starts completely hidden and expands from the center into a full circle on hover. This is a striking interaction pattern for image galleries and portfolio grids.

Arrow to Rectangle

.cta-button {
  padding: 1rem 2rem;
  background: #6c5ce7;
  color: white;
  clip-path: polygon(
    0% 0%, 85% 0%, 100% 50%,
    85% 100%, 0% 100%, 0% 0%
  );
  transition: clip-path 0.3s ease;
}

.cta-button:hover {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 50%,
    100% 100%, 0% 100%, 0% 0%
  );
}

On hover, the arrow tip flattens into a rectangle. The shape morphs smoothly because both states have the same number of polygon points.

Tips for Working with clip-path

Use a visual editor. Plotting polygon coordinates by hand is tedious. Online tools like Clippy let you drag points on a visual canvas and copy the resulting CSS. Once you have the base shape, you can fine-tune the values in code.

Remember that clipped areas are not interactive. The clipped-out portion of an element does not receive pointer events. This is usually desirable, but be aware of it when clipping interactive elements like buttons.

Combine with other properties. clip-path works beautifully alongside filter, backdrop-filter, and CSS transforms. A clipped element can still have shadows applied via filter: drop-shadow() (note that box-shadow follows the element box, not the clip shape).

Performance is generally good. Browsers hardware-accelerate clip-path in most cases. Animating it is more performant than animating complex border-radius or mask-image values, though you should still test on lower-end devices for complex paths with many points.

Putting It All Together

The clip-path property bridges the gap between simple CSS rectangles and the complex shapes traditionally reserved for graphic design tools. Whether you are building production UI components with diagonal dividers and hexagonal avatars, or competing in CSS battles on StyleWars to recreate target images with pixel-perfect precision, mastering these shape functions gives you a significant creative advantage.

If you are new to CSS challenges, our complete guide to CSS Battle covers the fundamentals. Once you are comfortable with the basics, clip-path is the property that will unlock an entirely new tier of designs -- shapes that look complex but are defined in a single line of CSS.

Start with the simpler circle() and polygon() examples, experiment with hover animations, and work your way toward custom path() shapes. Every shape you clip is another tool in your CSS arsenal.