CSS clip-path

The clip-path property in CSS is used to apply a clipping path to an element. This property allows you to define a specific region of an element that is visible, while the rest of the element is hidden. This can be useful for creating unique shapes or effects on your website.

There are several ways to define a clipping path in CSS, including using geometric shapes, SVG paths, or even images. Let's explore some examples to understand how the clip-path property works.

Example 1: Using a basic shape

In this example, we will create a clipping path using a basic shape like a circle.

Result:


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

This is an example text within a clipped circle.

In the example above, we used the circle(50%) value to create a clipping path that forms a circle. The text inside the element is only visible within the circle defined by the clipping path.

Example 2: Using an SVG path

You can also define custom clipping paths using SVG paths. This allows for more flexibility and complex shapes.

Result:


  .clip-path-example {
    clip-path: url(#custom-path);
  }

This is an example text within a custom clipped path.

In this example, we defined a custom clipping path using an SVG path. The url(#custom-path) value references the custom path defined in the SVG element, creating a unique shape for the clipping path.

These are just a few examples of how you can use the clip-path property in CSS to create interesting visual effects on your website. Experiment with different shapes and paths to create unique designs for your elements.