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.
Superellipse-like corners are often used to evoke the look of iOS app icons. This generator produces a mathematical superellipse; it does not reproduce an official Apple mask. Apple asks developers to provide square icon artwork and applies the platform mask itself. For mockups and web UI, an exponent around n = 5 is a useful visual starting point.
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)
A broadly supported way to render a squircle is to clip an element with a sampled 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 the generated shape:
.box { width: 240px; height: 240px; clip-path: path("M …"); }
Method 2 — corner-shape: superellipse() (the future)
Some browsers support the experimental corner-shape property. Its superellipse(K) parameter is not the same number as this generator's exponent n: the CSS definition uses n = 2K, so the one-line output converts the value for you. Check current support before production use.
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-icon mockups — create an iOS-style visual approximation; let the platform apply the production 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 a useful visual approximation. Use the "iOS app icon" preset as a starting point, not as Apple's official mask.
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 mathematical superellipse. Use a generated clip-path, an SVG, or the experimental corner-shape property when you need a superellipse-style outline.
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.
References and implementation notes
- Apple Human Interface Guidelines: App icons — production icon artwork and system-applied masks.
- MDN: CSS
path()— syntax, fixed-coordinate behavior, and browser compatibility. - MDN: CSS
superellipse()— experimental status and the CSS curvature parameter. - Implementation: the downloaded SVG and CSS path sample the selected superellipse at 200 points; they are scalable vector approximations of the equation.