What is Squircle Generator?

Squircle Generator is a tool for creating shapes that sit between a square and a circle, then exporting them as CSS clip-path: path() values or full SVG code. It works well when border-radius feels too ordinary or too round, and you want softer corners while keeping some edge character. You can compare corner smoothness, rotation, ratio, and generated size in a live preview, which makes it useful for app icons, cards, buttons, thumbnails, and other UI surfaces.

The preview is rendered with SVG, and you can start from presets before fine-tuning the shape. The output can be copied as full CSS, a clip-path value, an SVG path d attribute, or a full SVG snippet.

How to Use Squircle Generator

1. Start with a Preset if one of the common use cases fits what you need, or use the ratio options to set the overall silhouette first.
2. Adjust Corner smoothness to decide how round or square-like the shape should feel.
3. Switch Rotation between 0° and 45° depending on whether you want a standard orientation or a more diamond-like silhouette.
4. Refine the ratio if you want the squircle to feel more square, wide, or tall.
5. Adjust the fill color if you want to judge the preview or the full SVG output with a different color.
6. If you already know the implementation size, set the width and height in the Generated size section.
7. Choose the Output format and copy only the format you need.

Main Settings

Presets

The preset area separates two jobs. The use-case presets such as App Icon, Avatar / Badge, Button / Pill, Card 4:3, and Thumbnail 16:9 give you a starting point that already includes size, rotation, and smoothness. The ratio presets such as 1:1 and 16:9 are better when you only want to change the width-to-height balance.

Corner Smoothness

Higher values make the shape rounder, while lower values keep more of the straight-edge feel. The lower end works well for buttons or wide cards, while higher values are better when you want a softer icon or thumbnail silhouette.

Rotation

0° keeps the shape in a standard orientation, which is usually easier to judge for cards and buttons. 45° gives it a more diamond-like feel similar to Squircley, which is useful when you want something closer to an app-icon or badge silhouette.

Aspect Ratio

You can quickly try square, wide, and tall squircles without treating width and height as the main design controls. 1:1 works well for icons and avatars, while 4:3 and 16:9 are more useful for cards, thumbnails, and cover-like layouts. It is also useful when a use-case preset feels close, but the overall proportion still needs adjustment.

Generated Size

These values define the base size of the generated path() and SVG output. They do not change the preview zoom. They define the coordinate space used in the generated code, so keeping them close to the size you actually plan to build usually reduces later rework.

Output Format

• Full CSS is useful when you want a ready-to-paste .squircle block
• clip-path value is useful when you only need path('...') for existing CSS
• SVG path d attribute is handy when another SVG or design tool only needs the d value
• Full SVG code gives you a complete SVG snippet with the current fill color included

Fill Color

This setting helps you judge the shape in the preview. It is not included in the CSS or path-only outputs, but it is included when you copy the full SVG output.

Why Does Generated Size Change the Output?

The generated clip-path: path() uses absolute coordinates based on the selected width and height. That means the numbers inside the path change with the size, even when the overall ratio stays the same.

• 240 × 135 and 480 × 270 share the same 16:9 ratio, but they produce different coordinate values
• the preview may scale down for readability, but the exported code is recalculated for the selected size
• if the final component size changes later, regenerating the path usually gives a more accurate result

Output Example

A 240 × 240px shape produces code like this when Full CSS is selected.

.squircle {
  width: 240px;
  height: 240px;
  clip-path: path('M 120 0 L 138.2 0.85 ... Z');
}

From the same shape, you can also copy only the clip-path value, only the SVG path d attribute, or the full SVG code.

Use Cases

• Creating a base shape for app icons or profile images
• Making 4:3 or 16:9 cards, thumbnails, and cover blocks feel softer than a standard border-radius
• Keeping some straight-edge character on buttons and badges instead of making them fully round
• Keeping corner styling consistent across icons, cards, and other UI surfaces

Things to Keep in Mind

• The generated clip-path: path() is size-specific. If the element size changes, the path coordinates change too, so it is usually better to generate the path again.
• Fill color is not included in the CSS or path-only outputs. It only affects the full SVG output.
• Browser support for clip-path: path() can vary, so it is worth checking the result in your target environment before shipping it.