What is Squircle?
A squircle is the rounded-square shape used by iOS app icons: smoother than a normal rounded rectangle. This tool builds a true superellipse, lets you tune the size and curvature, previews it live, and outputs both an SVG and a CSS clip-path you can apply to any element.
How Squircle works
A squircle is a superellipse defined by |x/a|ⁿ + |y/a|ⁿ = 1. The exponent n controls how square it is (n=2 is an ellipse; higher n approaches a square).
The generator samples points along that curve to build an SVG path, which you can use directly or as a CSS clip-path: path(...).
Common uses
- Create iOS-style app-icon shapes
- Make smooth rounded containers and avatars
- Get an SVG squircle for design tools
- Apply the shape via CSS clip-path
Frequently asked questions
What is a squircle?
A shape between a circle and a square — a superellipse — with smoother corners than a standard rounded rectangle.
How is it different from border-radius?
border-radius uses circular arcs; a squircle uses a continuous curve, giving the softer Apple-style look.
How do I use the clip-path?
Apply the generated clip-path: path(...) to a same-sized element to mask it into the squircle shape.