Create clip-path polygon shapes by dragging handles on a live preview. Choose presets or build custom shapes. Copy CSS instantly.
💡 Drag the white handles to reshape. Values are in % of the element's dimensions.
Presets
Points
About CSS Clip-Path Generator
The CSS clip-path property clips an element to a defined shape. Only the pixels inside the shape are visible. Use it to create diagonal sections, hexagons, stars, arrows, and any other polygon shape.
Common Use Cases
Hero sections - diagonal bottom edge · Image masks - hexagonal or circular image frames · Decorative dividers - between page sections · Custom buttons - angled or arrow-shaped
Frequently Asked Questions
No - the element still occupies its original space. Only the visible rendering is clipped. To avoid invisible areas being clickable, you may need to add pointer-events: none to the clipped-away regions, or use a different approach.
clip-path polygon() is supported in all modern browsers (Chrome, Firefox, Safari, Edge). It is not supported in Internet Explorer. No vendor prefixes are required for modern browsers.
In clip-path polygon(), percentage values are relative to the element's own width and height. 0% 0% is the top-left corner, 100% 0% is the top-right, 100% 100% is the bottom-right, and 0% 100% is the bottom-left.
Yes - you can animate between two clip-path polygon() values with CSS transitions or animations, as long as both polygons have the same number of points. This creates smooth morphing effects.
About CSS Clip-Path Generator — CSS Clip-Path Generator Online
This free CSS clip-path generator online lets you create any polygon, hexagon, triangle, star, arrow, trapezoid, or custom shape by dragging visual handles on a live preview, then copies the ready-to-use clip-path CSS declaration with a single click. Choose from 12 built-in shape presets or start from the Rectangle and modify individual control points. Each handle position is tracked as a percentage of the element's dimensions, making the output fully responsive — the shape scales correctly regardless of how big or small the element is on screen.
Front-end developers and UI designers use the CSS clip-path property to create diagonal hero section cuts, hexagonal image thumbnails, arrow-shaped call-to-action banners, custom button shapes, and animated reveal effects. Before tools like this CSS clip-path generator online existed, creating these shapes required calculating percentage coordinates by hand and refreshing the browser repeatedly to check each adjustment. The live drag-and-drop interface eliminates that trial-and-error process entirely and produces pixel-accurate results in seconds.
How to Use the CSS Clip-Path Generator
Select a Preset shape from the grid on the right panel. Available presets include Rectangle, Pentagon, Hexagon, Arrow, Diagonal, Diagonal Reverse, Slant, Star, Triangle, Trapezoid, and Circle-ish (an approximated circle polygon).
Drag the white circular handles on the preview area to reshape the polygon. Each handle corresponds to one vertex of the clip-path polygon. Drag any handle to a new position and the clip-path updates instantly.
Fine-tune individual point coordinates using the Points panel on the right side. Each point shows X and Y percentage inputs. Type exact values for precise control that is difficult to achieve with mouse dragging alone.
Use the + Add Point and − Remove Last buttons to add or remove vertices from the polygon, enabling custom shapes with any number of points.
Optionally change the Background Color using the color picker to preview your shape on a different background, then click Copy CSS to copy the clip-path declaration.
How CSS Clip-Path Works
The CSS clip-path property restricts the visible area of an element to a specified shape. Only the pixels inside the clipping region are rendered; everything outside is invisible. The polygon() function defines a shape using a list of x/y coordinate pairs, each expressed as a percentage of the element's width and height. For example, clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%) creates a four-point polygon that cuts the bottom-right corner diagonally — a popular effect for hero sections. The element still occupies its original layout space even when clipped; only the visible rendering changes.
Tips for Getting the Best Results
Use percentage values for responsive shapes: All coordinates generated by this tool use percentage values (0% to 100%) rather than fixed pixel values. This means the clipped shape scales proportionally with the element's size, so the same clip-path works correctly on a 400px-wide card and a full-width hero banner without modification.
Apply clip-path to a wrapper div, not the image itself: When clipping images, wrap the <img> in a <div> and apply clip-path to the wrapper. This prevents the image from shrinking to fit the clipped area and gives you more control over the image position within the clipped region using object-fit and object-position.
Add overflow: hidden to parent containers: Although clip-path clips the element's rendering, browsers sometimes allow the invisible clipped area to overflow its parent. Adding overflow: hidden to the parent container ensures the clipped areas are fully hidden, especially in older browser versions.
Use clip-path with transitions for reveal animations: Since polygon clip-paths with the same number of points are animatable, you can create entrance animations by transitioning from a clip-path that shows nothing (all points collapsed to one edge) to the full shape. For example, transition from polygon(0 0, 0 0, 0 100%, 0 100%) (a zero-width rectangle) to the full shape to create a wipe-in effect.
Test on multiple screen sizes: Because clip-path values are percentage-based, the shape appearance changes as the element's aspect ratio changes. A shape that looks perfect on a wide desktop banner may look different on a tall mobile element. Test your clip-path on multiple screen sizes and consider using media queries to switch to different clip-path values for different breakpoints.
Why Use a CSS Clip-Path Generator Online
Calculating polygon vertex coordinates manually for complex shapes like stars or hexagons requires trigonometry and multiple iterations to get right. A CSS clip-path generator online replaces this process with a visual drag interface where you can see the result in real time. The percentage coordinate system used by clip-path is also counterintuitive until you have used it many times — this tool abstracts away the coordinate math and lets you focus on the visual design outcome.
UI developers use this tool when implementing diagonal section dividers between page sections — a popular landing page design pattern. Designers use it to prototype hexagonal image grids for portfolio layouts without needing to open a graphics editor. Marketing teams use it to create custom-shaped image frames and call-to-action banners that stand out from rectangular layouts. Students learning CSS use it as an interactive way to understand how the polygon function maps coordinates to visible shapes.
Frequently Asked Questions about CSS Clip-Path Generator
Yes. The CSS clip-path property works on any HTML element including <img>, <video>, <div>, <button>, <section>, and all other elements. It is commonly used to create hexagonal image thumbnails, circular avatars, and shaped video frames without needing image editing software. For images, apply the clip-path to a wrapper <div> for better control over the image positioning inside the clipped area.
Yes. Regions that are clipped away by clip-path are also excluded from pointer events — mouse clicks, hover states, and touch events only register on the visible area within the clip shape. This is useful for custom-shaped buttons where you only want the visible portion to be interactive. However, it can cause confusion if users expect to click on what appears to be a nearby blank area that is actually the invisible clipped portion of an element behind the visible content.
Yes. CSS clip-path can be animated using transition or @keyframes animations, with one important constraint: the two clip-path values being animated between must use the same shape function and the same number of points. For example, you can animate between two polygon() values with 4 points each, but not between a polygon() with 4 points and one with 6 points. This constraint is used to create reveal effects, morphing shapes, and scroll-triggered entrance animations.
Yes. The clip-path property with basic shape functions (polygon, circle, ellipse, inset) is supported in all modern browsers including Chrome, Firefox, Safari, and Edge without vendor prefixes. Internet Explorer does not support clip-path with CSS shapes, but IE represents a negligible share of current web traffic. SVG-based clip-path references may still require the -webkit- prefix in some older versions of Safari, but the polygon, circle, and ellipse functions used by this generator work without any prefix.
In clip-path: polygon(), each coordinate pair represents a point expressed as a percentage of the element's width (X axis) and height (Y axis). The origin (0% 0%) is the top-left corner of the element. Moving right increases the X percentage toward 100% (right edge). Moving down increases the Y percentage toward 100% (bottom edge). So 50% 0% is the top center, 100% 100% is the bottom-right corner, and 50% 50% is the exact center of the element.
Select the Hexagon preset in this generator to get the standard six-point hexagon coordinates. For a regular hexagon, the preset uses: 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%. Apply this clip-path to a square <div> containing an <img> with width: 100%; height: 100%; object-fit: cover. Make the container a square by setting equal width and height, and the image will fill the hexagonal shape proportionally.
Yes. Diagonal section cuts are one of the most popular uses of clip-path on modern landing pages. Select the Diagonal preset to get polygon(0 0, 100% 0, 100% 85%, 0 100%), which creates a section that angles down from right to left. Apply this to a hero section or content block to create a modern diagonal bottom edge. Adjust the 85% value to control the angle — lower values create a steeper angle, higher values create a gentler slope closer to horizontal.
No. The element still occupies its full original dimensions in the page layout regardless of the clip-path applied. Other elements will position themselves relative to the element's full unclipped box, not relative to the visible clipped area. This means a clipped element may have invisible areas that still affect the spacing and layout of surrounding elements. If you need the element's layout footprint to match its visible area, consider using CSS masking with mask-image or restructuring your layout to accommodate the clipped shape's boundaries.