How It Works

clip-path defines a “visible window” for an element. Everything outside that window is clipped away. Unlike image editing, clipping happens at render time in the browser, which means you can pair it with responsive layouts, CSS variables, and state-based styling.

This generator builds the clip-path function for you based on the shape type and parameters you provide, then produces a ready-to-paste CSS declaration. The tool focuses on the most practical functions for day-to-day UI work:

• polygon() for angled and custom outlines
• circle() for circular reveals and cropping
• ellipse() for spotlight and oval masks
• inset() for framed panels, cut-ins, and “window” effects

Workflow

• 1) Choose a shape — Select Polygon, Circle, Ellipse, or Inset.
• 2) Enter values — Provide points for polygons, or size/position settings for the other shapes.
• 3) Generate — The tool validates your inputs and formats them into a standards-based clip-path declaration.
• 4) Copy, reset, or download — Copy the CSS to the clipboard, reset to defaults for a fresh start, or download a snippet for documentation.

Input format is designed for speed. For polygon points, you can enter one point per line (for example, 10 0) rather than worrying about commas and parentheses. For circle and ellipse, you provide a radius and a position; for inset, you set the four offsets and an optional rounding value. The output always follows the correct function syntax.

Preview-friendly results. The generated snippet is suitable for applying directly to an element. Many users like to paste it into a component’s class or a CSS module, then adjust values with browser dev tools to fine-tune the final look.

Key Features

Polygon Builder (Percent Coordinates)

Polygons are the most flexible option because you can define any outline using a set of points. This tool uses percentage coordinates by default because percentages scale naturally as the element resizes. That makes polygons ideal for responsive components like hero headers, feature banners, and cards that adapt to different viewports.

Enter polygon points one per line using x y values (0–100). The tool formats them into polygon(x% y%, ...) so you don’t have to. If you prefer, you can also use comma-separated input—both are accepted and normalized to clean output.

Tip: If you want perfectly straight edges, keep point counts low. If you need a more “organic” or complex shape, you can add more points where detail matters, such as the corner notch or diagonal cut.

Circle Controls (Radius + Anchor)

The circle() function is perfect for round masks and spotlight reveals. You can generate a centered circle for avatar crops, or shift the anchor point to create an off-center highlight that reveals a specific part of an image.

In CSS syntax, circle uses a radius and a position: circle(40% at 50% 50%). The tool lets you set the radius and “at” coordinates separately, then assembles the final expression. Because the output is percent-based, the reveal stays proportional when the element size changes.

Ellipse Controls (Two Radii + Anchor)

Ellipses are a practical middle ground: they can act like a soft spotlight or create oval crops for images and backgrounds. The generator supports both radii (x and y) and a position anchor, outputting the ellipse(rx ry at x y) format with consistent spacing.

This is especially useful for overlays: place an element with a semi-transparent background on top of content, then cut an elliptical “window” to draw attention to a specific area below.

Inset Masks With Optional Rounding

inset() defines a clipped rectangle by specifying top, right, bottom, and left offsets. It’s great for framed panels, “window” effects, and UI cut-ins. For modern designs, you may want soft corners—this is where inset’s optional round value shines.

Set offsets in percentages for responsive layouts, then optionally add a rounding value (also in percentages) to get a smooth card-like shape. This can replace multiple nested wrappers in many layouts, keeping your markup cleaner.

Clean, Copy-Ready Output

The result panel outputs both the raw clip-path value and a full CSS declaration you can paste into a class. Formatting is consistent, readable, and easy to maintain. You can also download a small snippet file to share with teammates or keep as a design reference.

Practical Defaults for Instant Results

The page loads with a realistic, production-style polygon example (a subtle “card notch” silhouette). That means you can see a valid output immediately, then adjust points to match your design. Defaults are intentionally practical rather than generic so you can learn by tweaking a shape that resembles real UI components.

Use Cases

• Hero section angles: Create slanted headers and section dividers with polygon points to add visual energy without images.
• Image masking: Clip product photos, team avatars, portfolio thumbnails, or gallery tiles into consistent shapes.
• Card emphasis: Add unique silhouettes to feature cards or pricing blocks to create hierarchy and guide attention.
• Spotlight overlays: Use circles/ellipses to reveal content beneath an overlay element (tutorial steps, onboarding tours, or highlighted areas).
• UI cutouts: Build notched panels, inset frames, or “ticket” shapes for dashboards, landing pages, and widgets.
• Background art with gradients: Combine clip-path with gradients to create abstract shapes that remain crisp at any resolution.
• Micro-interactions: Animate between two compatible shapes for hover states, expand/collapse reveals, or loading effects.
• Prototyping and design reviews: Iterate quickly during feedback cycles without switching to a vector editor for every adjustment.

Because the output is plain CSS, you can pair it with responsive units, media queries, and variables to keep shapes adaptive across screen sizes. For example, you can store a polygon in a CSS variable and swap it based on breakpoints, themes, or component variants.

Clip-path also plays nicely with modern layout techniques. Apply a clip-path to a container that uses CSS Grid or Flexbox, and the clipping will affect the container’s visual boundary while your internal layout remains intact. This makes it ideal for sophisticated UI cards that need both complex shapes and robust content alignment.

Optimization Tips

Keep Polygon Point Counts Reasonable

More points mean more precision, but they can also make maintenance harder—especially if you need to update the shape later. Start with 4–8 points, then add detail only where it matters visually (for example, the notch or angle that creates the signature look). If you’re animating polygons, consistent point counts between states are essential for smooth transitions.

Use Percent Coordinates for Responsive Layouts

Percentage-based points scale naturally with element size, which makes shapes responsive by default. This is particularly helpful for hero banners, cards, and image masks that must work across multiple viewports. If you need a fixed notch size, you can either wrap the clipped element in a fixed-size container, or adjust values with breakpoints for small screens.

Combine With Border Radius Carefully

When using clip-path, a standard border-radius may not produce the rounding you expect, because clipping changes what’s visible rather than the element’s physical border. If you need rounded corners, prefer inset(... round ...) or use an inset approach with a rounding value for reliable results.

Plan Your Fallback Strategy

Clip-path is broadly supported in modern browsers, but if you serve older environments you might want a simple fallback. In many cases, the fallback can be “no clip”—a standard rectangle that still looks acceptable. Another approach is to apply clip-path only on larger screens where the decorative shape provides the most value.

Test On Real Content

Shapes that look great with placeholder text can behave differently with longer headlines, translated copy, or taller images. After generating a shape, apply it to real content examples. Adjust points to avoid clipping important text or focal areas in images.

FAQ