Clip Paths and CSS Masks

What Is It?

Clipping restricts painting to a shape. Masking uses image alpha or luminance to vary visibility across an element.

Properties, Tags and Attributes Explained

• clip-path: Chooses a clipping shape such as circle(), inset(), or polygon().
• mask-image: Sets an image or gradient controlling masked visibility.
• mask-size / mask-repeat: Control mask sizing and tiling.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Clip a polygon

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clip Paths and CSS Masks</title>
  <style>
    .demo { width: 160px; height: 140px; background: linear-gradient(#2563eb, #7c3aed); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  </style>
</head>
<body>
  <div class="demo" aria-label="Decorative triangle"></div>
</body>
</html>

What you see: Only the triangular part of the rectangular element is painted.

Example 2: Fade a decoration

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clip Paths and CSS Masks</title>
  <style>
    .demo { width: 240px; max-width: 100%; height: 140px; background: linear-gradient(90deg, #f97316, #7c3aed); mask-image: linear-gradient(to right, black, transparent); mask-repeat: no-repeat; mask-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="demo" aria-label="Decorative color fade"></div>
</body>
</html>

What you see: The gradient mask progressively hides the decoration toward the right.

When and Where to Use It

Use clipping for decorative shapes and masks for soft image fades. Keep important text outside masked areas.

Common Mistake or Useful Tip

Neither technique changes the element layout box. Clipped or masked visuals can still occupy rectangular layout space.

Try It Yourself

Change the polygon to circle(45%) and compare its outline.