CSS clip-path Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The clip-path CSS property allows you to control which parts of an element are visible by defining a clipping region. Anything that falls outside this region is visually hidden, while the content inside remains visible and interactive. Unlike traditional cropping, clip-path does not permanently remove content - it simply masks it at render time. This makes it extremely useful for creating non-rectangular layouts, decorative effects, and modern UI designs without modifying the underlying HTML structure or using images.

One of the most powerful aspects of clip-path is its ability to create complex shapes using geometric definitions such as polygons, circles, or ellipses. This allows designers to move beyond standard rectangles and introduce visually engaging layouts like diagonal sections, angled cards, speech bubbles, or custom hero sections. Because clipping is handled at the CSS level, these shapes scale naturally with responsive layouts and can adapt smoothly to different screen sizes, making them ideal for modern, fluid design systems.

Another key benefit of clip-path is how well it integrates with transitions and animations. You can animate between different clipping shapes to create engaging hover effects, reveals, or dynamic transitions between UI states. This is commonly used for interactive buttons, image reveals, and animated navigation elements. Since the clipped content still exists in the DOM, it remains accessible to screen readers and search engines, helping maintain semantic structure while achieving advanced visual effects. Overall, clip-path provides a powerful balance between creative freedom and performance-friendly design when used thoughtfully.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: As specified, but with <url> values made absolute
Animatable: Yes
JavaScript syntax: object.style.clipPath

Interactive Demo

clip-path: none;

clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

clip-path: ellipse(25% 40% at 50% 50%);

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Syntax

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

/* where */
<clip-source> = <url> /* URL references an SVG <clipPath> element  */

/* and */
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

Values

<clip-source>A <url> referencing an SVG <clipPath> element.
<basic-shape>The size and position of the area is determined by the value of . If geometry is not defined, the border-box will be used as a block.
<geometry-box>
If defined in combination with <basic-shape>, this value defines the block for the base area. If set independently, defines the boundaries of the block, including the formation of angles (such as border-radius ). Geometry can be determined using one of the following values:
- fill-box - Uses the boundaries of the object as the base area.
- stroke-box - Uses stroke bounding box as the base area.
- view-box - Uses the nearest SVG viewport as a base unit. If the viewBox defined for the element creating the SVG viewport, the base unit is positioned in the original coordinate system set by the viewBox attribute and the width and height of the base unit are set to the values of the viewBox attribute.
- margin-box - Uses margin box as a base unit.
- border-box - Uses a border box as a base unit.
- padding-box - Uses a padding box as a base unit.
- content-box - Uses the content box as the base unit.
noneCropped area is not created.

Example

HTML

<div class="scene">

    <div class="clipped">

        <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=800&q=80" alt="Mountains and lake">

    </div>

    <p>Hover the image to change the clipping shape.</p>

</div>

CSS

/* Basic page */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f6f8ff 0%, #e8f0ff 100%);
    margin: 0;
}

/* Scene */
.scene {
    text-align: center;
    max-width: 360px;
}

/* Clipped image container */
.clipped {
    width: 360px;
    height: 240px;
    margin: 16px auto;
    box-shadow: 0 8px 24px rgba(20, 20, 50, 0.15);
    border-radius: 12px;
    overflow: hidden;
}

.clipped img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
    transition: clip-path 600ms cubic-bezier(.22,.9,.32,1), -webkit-clip-path 600ms cubic-bezier(.22,.9,.32,1), transform 600ms;
}

/* Hover to change shape */
.clipped:hover img {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    transform: scale(1.03);
}

/* Heading and paragraph */
.scene h2 {
    margin: 0;
    font-size: 18px;
    color: #0f1724;
}

.scene p {
    margin: 8px 0 0;
    color: #334155;
    font-size: 14px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS clip-path property. Hover over a browser icon to see the version that first introduced support for this CSS property.