Create Organic Designs with Superellipses
Why use Squircles?
Standard rounded corners (border-radius) can feel harsh because the transition from straight line to curve is abrupt.Squircles (Superellipses) solve this by using G2-continuous curves, creating a specialized shape that feels more natural and organic—famously used by Apple in iOS icons and hardware.
- Mathematically PerfectGenerate true superellipses with adjustable curvature smoothing.
- Production ReadyExport as optimized SVG or CSS Mask for immediate use in your projects.
- Modern DesignEmulate the premium feel of iOS and modern hardware design.
G2 Continuity Explained
In vector graphics, continuity describes how two curves meet.G0 means they touch. G1 means they share a tangent direction (standard border-radius).
G2 Continuity means the rate of curvature change is also smooth. This eliminates the microscopic "bump" where the straight line meets the corner, resulting in a shape that looks perfectly smooth to the human eye.
SVG vs CSS Mask
SVG is best for icons and standalone graphics. It provides the highest fidelity and is vector-based.
CSS Mask (Houdini) is ideal for containers, images, and buttons. It allows you to apply the squircle shape to any HTML element without changing markup, maintaining semantic structure.
Explore more tools
Looking to do more? Try these secure, locally executed tools.