Squircle Generator
The shape between a circle and a rounded square. Tune the curvature, pick a fill, and take it as SVG, PNG, or a CSS clip-path you can put on any element.
Local onlyEverything on this page — the preview, the randomness, and every file you download — is generated by JavaScript in this tab. Nothing you type, pick, or upload is transmitted, and the page keeps working offline.
A squircle is the shape iOS app icons made famous — mathematically a superellipse, the smooth blend between an ellipse and a rectangle. It looks softer than CSS border-radius because there is no point where a straight edge meets a circular corner: the curvature changes continuously around the whole outline. This generator plots the real equation, |x/a|n + |y/b|n = 1, and lets you slide the exponent from a pure ellipse (n = 2) toward a rounded square (higher n). Around n = 4–5 you get the familiar app-icon feel.
Three exports for three jobs. The SVG is a single clean path for design tools and inline use. The PNG is for anything that only takes rasters. The CSS clip-path is the quiet star: one clip-path: polygon(…) line that masks any element — an image, a video, a div — into a squircle with no SVG file at all, and it follows the element's own aspect ratio.
Questions this tool gets asked
What is a squircle?
A squircle is a superellipse — a closed curve defined by |x/a|ⁿ + |y/b|ⁿ = 1 whose corners blend continuously into its sides. At n = 2 it's an ellipse; as n rises it approaches a rectangle. Apple popularized the shape with iOS app icons, and it now reads as the softer, more designed alternative to a plain rounded rectangle.
How is a squircle different from border-radius?
border-radius glues quarter-circles onto straight edges, so the curvature jumps abruptly where they meet — an edge your eye can find. A squircle's curvature changes gradually along the entire outline, which is why it looks smoother at the same corner size. The difference is subtle at small sizes and obvious on large cards, avatars, and icons.
What exponent matches iOS app icons?
Apple's exact icon outline is a custom curve, but a superellipse with n around 5 is the widely used approximation, and n = 4 reads nearly identically at typical sizes. Set the curvature slider to 5, keep stretch at 100%, and you have the standard app-icon silhouette.
How do I clip an image into a squircle with CSS?
Press Copy CSS clip-path and paste the one-line polygon rule onto the element — img, video, or div. The polygon is written in percentages, so it adapts to the element's own width and height. No mask file, no SVG reference, works in every modern browser.
Why export SVG instead of using clip-path?
Use the SVG when you need the shape itself rather than a mask: as an icon background, in Figma or Illustrator, or when you want the gradient fill baked in. Use the clip-path when the shape's job is to crop existing content in the browser. Same geometry either way.
Is this squircle generator free and private?
Free, no signup, no watermark, ad-supported. The curve is computed by JavaScript in this tab and every export is assembled locally — nothing you make here is uploaded.