What Is CSS Clip Path?
The clip-path CSS property creates a clipping region that defines which part of an element is visible. Everything outside the defined region is hidden, effectively cutting the element into a specific shape — circles, polygons, ellipses, or complex custom forms. Unlike traditional masking techniques that rely on PNG images with transparency, clip-path is purely code-based, resolution-independent, and dynamically adjustable. The clipped area does not affect the document layout; the element still occupies its original rectangular space in the flow, but only the clipped portion is rendered visually.
Clip-path works on any HTML element — images, divs, videos, and canvases. This makes it an incredibly versatile tool for web design. You can mask a profile picture into a circle, cut a container into a hexagon, or shape a hero section with an angled bottom edge — all without modifying the underlying image or adding extra markup. The result is cleaner HTML, better performance, and easier maintainability compared to image-based masking.
Types of Clip Path Shapes
circle()
The circle() function clips an element into a perfect circle. It accepts a radius value and an optional center position. The syntax circle(50% at 50% 50%) creates a circle with a radius of 50% of the element's dimensions, centered exactly in the middle. This is the most common use case for circular profile images, avatar placeholders, and icon backgrounds. Because the radius is calculated relative to the element's bounding box, the circle automatically scales proportionally when the element is resized.
ellipse()
The ellipse() function creates an oval shape by accepting separate horizontal and vertical radius values. The syntax ellipse(25% 40% at 50% 50%) defines an ellipse that is 50% wide (25% radius on each side) and 80% tall (40% radius on each side), centered in the element. Ellipses are useful for creating pill-like shapes, panoramic image masks, and decorative elements where a pure circle feels too rigid. The ability to offset the center point with the at keyword allows for asymmetric oval shapes that can create dynamic visual tension.
polygon()
The polygon() function is the most flexible clip-path shape, defined by a series of coordinate pairs that represent the vertices of a multi-sided shape. Each pair is expressed as percentages of the element's width and height. For example, polygon(50% 0%, 0% 100%, 100% 100%) places the first point at the top-center, the second at the bottom-left, and the third at the bottom-right, forming a triangle. Polygons can have any number of vertices, enabling complex shapes like hexagons, stars, arrows, diamonds, and organic blob forms. The points are connected in order by straight lines, so the shape is always closed.
How Clip Path Works in CSS
The clip-path property accepts several types of values. Basic shape functions — circle(), ellipse(), polygon(), and inset() — define the clipping region using geometric parameters. The inset() function is particularly useful for creating rectangles with rounded corners that go beyond standard border-radius, as it allows individual corner clipping. You can also reference an SVG clipping path using url(#clipId), which enables arbitrarily complex curved shapes defined in SVG markup.
One important characteristic of clip-path is that it affects rendering but not layout. The element's box model — margins, padding, borders, and background — remains rectangular in the document flow. Interactions like hover states and click events only trigger within the visible clipped area in most browsers, which is useful for creating non-rectangular interactive buttons. Transitions and animations can be applied to clip-path, enabling smooth morphing effects between different shapes — for example, transitioning a square to a circle on hover.
How to Use This Clip Path Generator
This tool simplifies the process of creating clip-path CSS by providing a visual preview alongside ready-to-use code. Select a shape preset from the control panel — circle, ellipse, triangle, or hexagon — and the preview updates instantly to show how the shape looks applied to a gradient element. The corresponding CSS code is generated automatically below the preview. Click the copy button to transfer the code to your clipboard and paste it directly into your stylesheet. When styling clipped elements with gradients or background colors, generate color palettes that provide visually appealing combinations. For precise color adjustments in your CSS values, you can convert HEX to RGB to work with opacity and rgba formats. To develop a cohesive visual language across your clipped shapes and surrounding UI, learn color combinations that enhance the impact of masked elements.
Real Use Cases for Clip Path
Image masking is the most prevalent use case — replacing border-radius for circular avatars or creating polygon-shaped thumbnails for galleries and team pages. Creative UI cards use clip-path to break away from rectangular conventions, employing angled corners, hexagonal frames, or diagonal cuts that make card layouts feel dynamic and modern. Hero sections frequently use clip-path on the bottom edge of a hero container — polygon(0 0, 100% 0, 100% 85%, 0 100%) creates a subtle slant that visually connects the hero to the content below. Hover effects leverage animated clip-path transitions to reveal hidden content — a card that expands from a small circle to a full rectangle on hover, or a button that morphs shape when interacted with. These effects add a layer of polish that distinguishes professional interfaces from template-based designs.
Clip-path also pairs well with other CSS properties for more advanced results. Combining a clipped shape with a box shadow creates depth around non-rectangular elements (though note that shadows follow the original box model, not the clip). Layering clip-path over CSS gradients produces striking masked backgrounds for sections and cards. For three-dimensional transformations applied to clipped elements — like rotating a hexagonal card in perspective — the 3D transform tool handles the matrix math. And when you need a full page layout that incorporates clipped shapes alongside flexible alignment, the Flexbox playground helps you build the surrounding structure.