Advertisement

CSS Clip Path Generator

Create CSS clip-path shapes visually with polygon, circle, ellipse, and inset presets.

Shape Presets

Preview

#3b82f6

Controls

3 points
1%
2%
3%

Generated CSS

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Advertisement

Related Tools

CSS AnimateNEW

Create CSS keyframe animations visually with timing controls, easing presets, and live preview.

Border RadiusNEW

Create CSS border-radius values visually with individual corner controls and live preview.

Box Shadow

Create CSS box shadows visually. Adjust blur, spread, offset, and color.

FlexboxNEW

Build CSS flexbox layouts visually with live preview of justify, align, wrap, and gap properties.

Advertisement

Frequently Asked Questions

What is CSS clip-path?
CSS clip-path is a property that creates a clipping region to define which part of an element is visible. Content outside the clipping region is hidden. You can use basic shapes (circle, ellipse, inset) or polygon coordinates to create custom shapes. It is widely supported in all modern browsers.
What shape presets are available?
The tool includes presets for circle, ellipse, triangle, rectangle, pentagon, hexagon, octagon, star, cross, arrow, and custom polygons. Each preset generates the correct clip-path code that you can further customize by dragging the control points.
Can I drag points to customize shapes?
Yes, each polygon point is represented by a draggable control point on the preview. Click and drag any point to adjust the shape interactively. The CSS code updates in real-time as you move points, giving you precise control over the final shape.
What clip-path types are supported?
The tool supports three clip-path types: polygon() for custom shapes with multiple points, circle() for circular clipping with adjustable radius and position, and ellipse() for oval clipping with independent horizontal and vertical radii.
Is clip-path supported in all browsers?
CSS clip-path with basic shapes and polygons is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer does not support clip-path. For broader compatibility, you can use SVG-based clipping as a fallback, though this is rarely needed today.
How do I add or remove polygon points?
Click the "Add Point" button to add a new control point to the polygon. Click the delete button on any existing point to remove it. You need at least 3 points for a valid polygon. Points can be repositioned by dragging them in the preview area.

How to Use the CSS Clip-Path Generator

CSS clip-path is one of the most creative CSS properties, allowing you to clip elements into any shape imaginable. Our visual CSS Clip-Path Generator makes it easy to create complex clipping shapes without writing coordinates by hand. Start with a preset shape, drag the control points to customize it, and copy the generated CSS.

Step 1: Choose a shape type. Select from preset shapes like circle, triangle, hexagon, star, or start with a custom polygon. Each preset generates the appropriate clip-path value that you can use as-is or customize further.

Step 2: Customize with drag-and-drop. For polygon shapes, each vertex appears as a draggable control point on the preview. Click and drag any point to adjust the shape. For circles and ellipses, adjust the radius and position controls. The CSS updates in real-time as you make changes.

Step 3: Copy the CSS. Once you are happy with the shape, copy the generated clip-path CSS property. Paste it into your stylesheet and apply it to any element. The clipped element will display only the content within the defined shape.

Understanding CSS Clip-Path

The clip-path property defines a visible region for an element. Everything outside this region becomes invisible (clipped away). Unlike overflow: hidden which clips to a rectangular region, clip-path supports circles, ellipses, and arbitrary polygons, enabling creative layouts and design effects that were previously only possible with images.

The polygon() function is the most versatile clip-path type. It accepts a comma-separated list of x,y coordinate pairs that define the vertices of a polygon. Coordinates are specified as percentages (0% to 100%) relative to the element dimensions, making the shape responsive. The browser draws straight lines between consecutive points and clips the element to the resulting shape.

Circle() and ellipse() provide simpler alternatives for rounded shapes. Circle takes a radius and center position, while ellipse takes horizontal and vertical radii plus a center position. These are useful for creating circular avatars, rounded image crops, and spotlight effects.

Creative Uses of CSS Clip-Path

Image shapes. Clip images into non-rectangular shapes like circles, hexagons, diamonds, or custom silhouettes. This adds visual interest to photo galleries, team member cards, and portfolio layouts without requiring image editing software.

Diagonal sections. Create angled section dividers by clipping containers with polygon shapes that have angled edges. This modern design technique adds depth and visual flow to landing pages, replacing the need for background images with angled cuts.

Hover effects. Animate clip-path on hover to create reveal effects. For example, expand a circle clip-path from 0% to 100% radius for a circular reveal, or morph between shapes for eye-catching interactive elements.

Text masking. Combine clip-path with background images to create text or shapes filled with images, gradients, or patterns. This technique creates visually striking headers and hero sections that combine typography with imagery.

Advertisement