CSS Code
The CSS clip-path property creates a clipping region that defines which parts of an element are visible. Anything outside the clipping region is hidden. It is one of the most powerful CSS properties for creating non-rectangular shapes, custom image crops and creative UI layouts.
polygon() is the most flexible — it accepts any number of x/y coordinate pairs to define a custom shape. circle() clips to a circle with a given radius and center position. ellipse() clips to an ellipse with separate x and y radii. inset() clips to a rectangle with optional rounded corners, useful for revealing sections of an element.
While overflow: hidden always clips to a rectangle, clip-path can clip to any shape. This makes it essential for hero sections with angled edges, profile image shapes, decorative dividers and interactive reveal animations.
You can animate clip-path with CSS transitions and keyframes as long as both the start and end states use the same shape function with the same number of points. For example, transitioning a polygon from a triangle (3 points) to a pentagon (5 points) won't animate smoothly — you'd need to add duplicate points to the triangle so both shapes have 5 points.
Clip paths are composited by the GPU in most browsers, making them performant. All modern browsers support clip-path with shape functions. For SVG-based clip paths using url(), support is also universal. The property works on images, divs, videos and any other HTML element.