What is a squircle?
A squircle is a shape that sits halfway between a square and a circle. Mathematically it is a superellipse: every point on the outline satisfies |x/a|n + |y/b|n = 1. The exponent n controls how "square" or "round" the shape is. When n = 2 you get a plain ellipse or circle; as n grows the corners flatten out and the shape approaches a rounded rectangle. The sweet spot most designers call a squircle lives around n = 4 to n = 5.
Apple popularised the squircle with iOS app icons, the Home Screen grid, and hardware corners. Unlike a normal rounded rectangle — where a straight edge meets a circular arc and the curvature jumps abruptly — a superellipse has continuous curvature, so the transition into the corner looks smoother and more organic to the eye. That subtle difference is why squircles feel "premium" and why so many design systems have adopted them.
How to use this squircle generator
Everything updates live as you drag the sliders:
- Width and Height set the bounding box. Keep them equal for an icon, or stretch them for a button or card.
- Smoothing (n) is the superellipse exponent — the single number that decides how squircle-y the shape is.
- Fill picks the color used in the preview and the exported SVG.
- The presets jump straight to common shapes: iOS app icon, button, card, and avatar.
When you like the result, copy the SVG, copy the CSS clip-path, or download the .svg file. No account, no watermark, nothing leaves your browser — all the math runs locally.
Squircle in CSS
Method 1 — clip-path: path() (recommended today)
The most reliable cross-browser way to render a squircle right now is to clip an element with the exact superellipse outline. This generator produces a ready-to-paste clip-path: path("…") string. Give the element the same pixel width and height you set above, and it will be clipped to a perfect squircle:
.box { width: 240px; height: 240px; clip-path: path("M …"); }
Method 2 — corner-shape: superellipse() (the future)
Newer Chromium browsers support a native corner-shape property that turns ordinary border-radius into a superellipse with one line. It is still experimental and not yet supported everywhere, so the clip-path output above is the safe choice for production. The modern one-liner box gives you that syntax to try.
Squircle vs rounded rectangle vs circle
A circle is the special case where width equals height and the curvature is constant. A rounded rectangle keeps long straight edges and only rounds the corners with a fixed-radius arc. A squircle blends the two: the edges bow out slightly and flow into the corners with no hard transition. If you have ever placed a circular logo inside an iOS-style icon and felt it looked "off", the reason is that the icon is a squircle, not a circle — matching the shape fixes the optical mismatch.
Common uses
- App icons — match the iOS / iPadOS icon mask.
- Buttons and cards — softer than a rounded rectangle, more contained than a pill.
- Avatars — a friendlier alternative to a hard circle.
- Image masks and clip frames — drop the SVG into Figma, Sketch, or any design tool.
FAQ
Is this squircle generator free?
Yes. It is completely free, needs no account, adds no watermark, and runs entirely in your browser.
What value of n should I use for an iOS-style icon?
Around n = 5 is the closest simple superellipse to Apple's icon shape. Use the "iOS app icon" preset as a starting point.
Can I use the SVG in Figma or Sketch?
Yes — download the .svg or copy the markup and paste it straight into any design tool.
Why not just use border-radius?
border-radius creates circular-arc corners, not a superellipse. A real squircle has continuous curvature, which is what makes it look smoother. Use clip-path or the new corner-shape property instead.
Does the squircle scale without losing quality?
The SVG is vector-based, so it scales to any size with no blur. The CSS clip-path is tied to the pixel size you set, so regenerate it if you change the element's dimensions.