Skip to main content
  • Created:
  • Updated:
  • Author:
    Takeshi Takatsudo

Clip-Path and Mask

The Problem​

AI agents almost never use clip-path or CSS masks, defaulting to rectangular layouts even when the design clearly calls for angled edges, circular reveals, or faded borders. When they do attempt non-rectangular shapes, they reach for images, SVGs, or extra wrapper divs with overflow: hidden and rotated pseudo-elements — all far more complex and brittle than the native CSS solutions.

The Solution​

CSS provides two complementary tools for non-rectangular rendering:

  • clip-path — Hard-edge clipping using geometric shape functions (polygon(), circle(), ellipse(), inset()) or SVG paths. Content outside the clip is invisible and non-interactive.
  • mask-image — Soft-edge masking using images or gradients. Where the mask is black (or opaque), the element shows through; where it is transparent, the element is hidden. Gradients create smooth fade effects.

Code Examples​

Clip-Path: Basic Shapes​

/* Circle clip */
.avatar-circle {
  clip-path: circle(50%);
}

/* Ellipse */
.banner-ellipse {
  clip-path: ellipse(60% 40% at 50% 50%);
}

/* Inset with rounded corners */
.rounded-inset {
  clip-path: inset(10px round 16px);
}

Clip-Path: Polygon Shapes​

/* Triangle */
.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Angled section edge */
.angled-section {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* Chevron / arrow */
.chevron {
  clip-path: polygon(
    0% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    0% 100%,
    25% 50%
  );
}

/* Hexagon */
.hexagon {
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
}

Angled Hero Section​

.hero {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  padding: 80px 24px 120px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.next-section {
  margin-top: -60px; /* overlap into the angled area */
  position: relative;
  z-index: 1;
}
<section class="hero">
  <h1>Angled Hero</h1>
</section>
<section class="next-section">
  <p>Content overlaps the angled edge.</p>
</section>

Animating Clip-Path​

Clip-path shapes can be transitioned and animated as long as the shape function type and point count stay the same.

.reveal-circle {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.6s ease-out;
}

.reveal-circle.is-visible {
  clip-path: circle(75% at 50% 50%);
}
/* Morphing between two polygons with the same number of points */
.morph {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* diamond */
  transition: clip-path 0.4s ease;
}

.morph:hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* rectangle */
}

CSS Mask: Gradient Fade​

Masks use luminance or alpha to determine visibility. A gradient from opaque to transparent creates a smooth fade.

/* Fade out at the bottom */
.fade-bottom {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Fade both edges horizontally */
.fade-edges {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}
<div class="fade-bottom">
  <img src="landscape.jpg" alt="Landscape" />
</div>

Scrollable Container with Faded Edges​

.scroll-fade {
  overflow-x: auto;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 40px,
    black calc(100% - 40px),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 40px,
    black calc(100% - 40px),
    transparent
  );
}

Mask with Radial Gradient (Spotlight Effect)​

.spotlight {
  mask-image: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    black 0%,
    black 20%,
    transparent 60%
  );
  -webkit-mask-image: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    black 0%,
    black 20%,
    transparent 60%
  );
}

Pair with JavaScript to move --x and --y custom properties on mousemove for an interactive spotlight.

Combining Clip-Path and Mask​

/* Hard clip for overall shape, soft mask for edge fading */
.shaped-fade {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

Mask with SVG Image​

.masked-image {
  mask-image: url("mask-shape.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("mask-shape.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

Live Previews​

Clip-Path Polygon (Angled Section)
Clip-Path Circle
Gradient Mask Fade-Out Effect

Common AI Mistakes​

  • Never using clip-path at all — Defaulting to rectangular layouts and ignoring the design's call for angled, circular, or geometric section edges.
  • Using rotated pseudo-elements instead of clip-path — Creating angled edges with transform: rotate() on ::before/::after and overflow: hidden, which is fragile and harder to maintain.
  • Animating between different shape functions — clip-path transitions only work when the start and end values use the same function (e.g., both polygon()) with the same number of points.
  • Forgetting the -webkit- prefix on mask properties — Safari requires -webkit-mask-image, -webkit-mask-size, etc. Without these, masks are invisible in Safari.
  • Using mask-image with mask shorthand incorrectly — The mask shorthand has complex sub-property parsing. Use individual properties (mask-image, mask-size, mask-repeat) for clarity and reliability.
  • Forgetting that clipped areas lose interactivity — Content outside the clip-path region is not just invisible but also non-clickable and non-hoverable, which can break expected interaction areas.
  • Using images for simple geometric masks — Loading an external image for a shape that clip-path: polygon() or a gradient mask can express natively.

When to Use​

  • Angled section dividers — Hero sections, feature blocks, and footer edges with diagonal or curved cuts
  • Circular or geometric image crops — Avatars, thumbnails, and decorative image shapes without extra markup
  • Fade-out effects — Scrollable containers, image reveals, and content previews that fade at edges
  • Page transition animations — Circle-wipe or polygon-morph reveals for route changes
  • Decorative UI shapes — Hexagonal cards, diamond badges, arrow callouts, and non-rectangular layouts

References​

Last updated on by Takeshi Takatsudo