1. css
  2. /properties
  3. /clip-path

clip-path

Definition

The clip-path CSS property is used to define a clipping region for an element. It allows you to specify the shape of the visible area of an element, by defining a path that the element is clipped to. The path is defined using a url() function, which references an SVG path or a shape function. The property can be used to create a variety of effects, such as masking, cutting out shapes, and creating interesting layouts.

Examples

Clipping an image: You can use the clip-path property to clip an image to a specific shape. For example, you can create a circular image by using the circle() function:

.circular-image {
    clip-path: circle(50% at 50% 50%);
}

Creating a hexagonal shape: The clip-path property can also be used to clip an element to a hexagonal shape. This can be done by using an SVG path:

<svg width="0" height="0">
    <defs>
        <clipPath id="hexagon-clip-path">
            <path d="M50 0 L100 25 L100 75 L50 100 L0 75 L0 25 Z"></path>
        </clipPath>
    </defs>
</svg>
.hexagon-shape {
    clip-path: url(#hexagon-clip-path);
}

Clipping a text: You can also use the clip-path property to clip a text to a specific shape. This can be done by using an SVG path:

<svg width="0" height="0">
    <defs>
        <clipPath id="text-clip-path">
            <path d="M0 0 L100 0 L100 100 L0 100"></path>
        </clipPath>
    </defs>
</svg>
.text-clip {
    clip-path: url(#text-clip-path);
}

Creating a complex shape: You can use the clip-path property to create a complex shape. This can be done by using an SVG path:

<svg width="0" height="0">
    <defs>
        <clipPath id="complex-clip-path">
            <path d="M0 0 L100 0 L100 50 Q50 100 0 50 Z"></path>
        </clipPath>
    </defs>
</svg>
.complex-shape {
    clip-path: url(#complex-clip-path);
}

Values

ValueDescription
noneNo clipping is applied. This is the default value.
<url>A URL referencing a clipPath element in an SVG document. The url() function is used to specify the URL.
<shape>A basic shape function. The following shape functions are available: circle(), ellipse(), inset(), polygon().
<basic-shape>A <shape> or <geometry-box> value, where <geometry-box> is a reference to a box. The following values are possible: margin-box, border-box, padding-box, content-box.

Best Practices

  • Use the clip-path property in combination with other CSS properties to create interesting and unique design effects.
  • Use the clip-path property with caution, as it can cause content to be hidden or inaccessible if not used correctly.
  • Use the clip-path property to create responsive designs by adjusting the value of the clip-path property based on the viewport size.
  • Be aware of browser compatibility when using the clip-path property. Not all values are supported by all browsers, so it may be necessary to provide fallback styles for older browsers.
  • Use a CSS preprocessor like Sass or Less to generate multiple variations of a clip-path value to ensure cross-browser compatibility.
  • You can use CSS @supports feature queries to check whether the browser supports the clip-path property and provide fallback styles for browsers that do not support it.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes