CSS Clip Path

The clip-path property in CSS is a powerful tool that allows you to define a clipping region to determine which parts of an element are visible. Unlike the older clip property, clip-path supports various shapes like rectangles, circles, polygons, and even custom paths.

Syntax

clip-path: shape || url || none;

Try It Now

  • shape: Defines the clipping path using a geometric shape (e.g., circle(), ellipse(), polygon(), inset()).
  • url: References an SVG <clipPath> element to define a clipping path.
  • none: No clipping is applied, and the entire element is visible.

Common Shapes

  1. Inset: Creates a rectangular clipping region. 
    clip-path: inset(10px 20px 30px 40px);

    Try It Now

  2. Circle: Creates a circular clipping region. 
    clip-path: circle(50%);

    Try It Now

  3. Ellipse: Creates an elliptical clipping region. 
    clip-path: ellipse(50% 30%);

    Try It Now

  4. Polygon: Creates a polygonal clipping region. 
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

    Try It Now

Example

Here’s a simple example using different clip-path shapes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Clip-Path Example</title>
  <style>
    .clip-rect {
      width: 300px;
      height: 200px;
      background-color: lightblue;
      clip-path: inset(20px 40px 20px 40px);
    }
    
    .clip-circle {
      width: 200px;
      height: 200px;
      background-color: lightgreen;
      clip-path: circle(50%);
      margin-top: 20px;
    }

    .clip-polygon {
      width: 300px;
      height: 200px;
      background-color: lightcoral;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="clip-rect">Inset Clipping</div>
  <div class="clip-circle">Circle Clipping</div>
  <div class="clip-polygon">Polygon Clipping</div>
</body>
</html>

Try It Now

Explanation

  1. .clip-rect:
    • Uses inset() to create a rectangular clipping path with margins of 20px and 40px on each side.
  2. .clip-circle:
    • Uses circle() to create a circular clipping path that cuts the element into a circular shape.
  3. .clip-polygon:
    • Uses polygon() to define a triangular clipping path, making the element visible only within the triangle’s boundaries.

Use Cases

  • Creative Designs: Use clip-path to create unique shapes and designs, enhancing the visual appeal of web pages.
  • Image Cropping: Clip images into specific shapes without needing image editing software.
  • Hover Effects: Combine clip-path with transitions to create engaging hover animations.

Browser Compatibility

clip-path is supported in most modern browsers. However, for maximum compatibility, especially with older browsers, you may need to use fallbacks or ensure your designs gracefully degrade.

Conclusion

clip-path is a versatile CSS property that allows for creative control over the visibility of elements on your web page. With support for various shapes and paths, it opens up new possibilities for design and layout without the need for additional graphics software.