CSS clip-path Property

Last Updated : 08 Jun, 2023

The clip-path property of CSS is used to clip the particular section of the image such that part of the image inside the section is shown and part of the image outside the section is not shown. and the CSS clip-path property allows you to create custom clipping paths to define the visible portion of an element. It can be used to create various shapes such as circles, polygons, or even complex paths. This property is commonly used for creating unique and non-rectangular layouts or image masks on the web.

Syntax:

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

Property value: All the properties are described well in the example below.

<basic-shapes>: It includes some shapes like circles, rectangles, ellipse, etc that clips the given image.
clip-path: none;: It includes no clipping. This is the default value.
clip-path: clip-source;: In this, the clipping part is taken from another HTML element that contains either image or an element. Element id is used to refer to the element.

Example 1: This example displays the basic use of the clip-path property to insert the specific shapes that clip the given image.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <style>
        #img {
            margin-bottom: 20px;
            clip-path: circle(40%);
        }

        #img1 {
            margin-bottom: 20px;
            clip-path: ellipse(115px 55px at 50% 40%);
        }

        #img2 {
            margin-bottom: 20px;
            clip-path: polygon(50% 20%, 90% 80%, 10% 80%)
        }

        #img3 {
            margin-bottom: 20px;
            clip-path: inset(22% 12% 15px 35px)
        }

        div {
            float: left;
        }
    </style>
</head>

<body>
    <p>Without clipping</p>
    <img height="200" width="200"
        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
    <p>With clipping</p>
    <div>
        <img id="img" height="200" width="200"
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
        <img id="img1" height="200" width="200"
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
        <img id="img2" height="200" width="200"
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
        <img id="img3" height="200" width="200"
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
    </div>
</body>
</html>

Output:

Example 2: This example displays the basic use of the clip-path property where the value is set to none.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
             initial-scale=1.0">
    <style>
        #img1 {
            margin-bottom: 20px;
            clip-path: none
        }
    </style>
</head>

<body>
    <div>
        <p>Without clipping</p>
        <img height="200" width="200"
            src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
        <p>With clipping</p>
        <div>
            <img id="img1" height="200" width="200"
                src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
        </div>
    </div>
</body>
</html>

Output:

Example 3: This example displays the basic use of the clip-path property where the property value is set to a url.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
             initial-scale=1.0">
    <style>
        #img1 {
            margin-bottom: 20px;
            clip-path: url("#clip")
        }
    </style>
</head>

<body>
    <p>Without clipping</p>
    <img height="200" width="200"
        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">

    <!-- Making a rectangle to clip 
        rectangle area -->
    <svg height="0" width="0">
        <clipPath id="clip">
            <rect y="100" x="0" width="100" height="100" />
            <rect x="100" y="0" width="100" height="100" />
        </clipPath>
    </svg>
    <p>With clipping</p>
    <img id="img1" height="200" width="200"
        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</body>
</html>