CSS clip‑path Circle & Ellipse Generator - Online

CSS clip-path is a property that defines a clipping region — only the portion of an element that falls inside this region is visible. The rest is hidden. It works like a "mask" that can take basic shapes like circle(), ellipse(), polygon(), inset(), or even SVG paths. It's widely used for image cropping, UI effects, animations, and creative layouts.

circle() creates a perfectly round clipping shape defined by a single radius value. ellipse() creates an oval shape with two radius values — rx (horizontal) and ry (vertical). Use circle() when you need a uniform circular crop, and ellipse() when you need more control over the width and height of the clipped region independently.

All modern browsers (Chrome 55+, Firefox 54+, Edge 79+, Safari 10.1+) support clip-path with basic shapes. Safari versions before 16 may require the -webkit-clip-path prefix. IE 11 and older browsers do not support it. Global support is approximately 96%+ as of 2025. Always test across target browsers and consider providing a fallback for legacy browsers.

Yes! clip-path is animatable with CSS transitions and keyframe animations, as long as the shape type remains the same (e.g., animating circle(30% at 50% 50%) to circle(50% at 50% 50%)). You can animate radius, position, or both simultaneously. Use transition: clip-path 0.3s ease; for smooth hover effects, or @keyframes for more complex animations. Note: animating between different shape types (e.g., circle to polygon) requires SMIL or JavaScript-based solutions.

You can use percentage (%), pixels (px), em/rem, vh/vw, or any CSS length unit. Percentages are relative to the element's reference box: for radius values, percentages resolve against sqrt(width² + height²) / sqrt(2) for circle(), and against the element's width/height for ellipse() rx/ry respectively. The at position percentages are always relative to the element's width and height. Using percentages is recommended for responsive designs.

The at keyword specifies the center position of the circle or ellipse. It accepts any CSS <position> value: percentages (e.g., at 50% 50% for center), pixel values, or keywords like at center, at top left, at right bottom. The first value is the horizontal position, the second is vertical. at 50% 50% places the center exactly in the middle of the element. Omitting at defaults to center.

Absolutely! clip-path works on any HTML element, including <img>, <video>, <canvas>, and <iframe>. It's commonly used to create circular avatar images, elliptical video overlays, and unique image crop effects. Just apply clip-path: circle(45% at 50% 50%); to your image element, and it will be perfectly cropped. The element still occupies its original space in the layout — only the visual rendering is clipped.

Content outside the clipping region is visually hidden — it's not rendered on screen. However, it still exists in the DOM and contributes to the element's layout box. The element retains its original dimensions for box-model calculations, margins, padding, and positioning. Importantly, pointer events (clicks, hovers) are also clipped: only the visible region of the element responds to user interaction, unless you set pointer-events: none or use a different approach.

Yes, clip-path animations are generally GPU-accelerated and perform well, especially with basic shapes like circle() and ellipse(). Browsers can composite clipped elements efficiently. However, avoid overly complex clip-paths with many vertices on low-powered devices. For best performance, animate using transform and opacity when possible, and reserve clip-path animations for intentional visual effects. Testing on real mobile devices is always recommended.