One of Squarespace's most underappreciated design features is its image shape system. While most websites rely on standard rectangular images, Squarespace gives you the power to create visually interesting layouts using custom image shapes — circles, arches, diamonds, and more.
In this guide, we'll show you how to use image shapes effectively and the design principles that make them work.
What Are Squarespace Image Shapes?
Image shapes allow you to display photos and graphics in non-rectangular containers. Instead of a standard square or landscape image, you can present visuals in organic shapes that add visual interest and break up the monotony of grid layouts.
Available shapes include:
- Circles — perfect for team photos and profile images
- Rounded rectangles — modern and approachable
- Arches — elegant and editorial
- Diamonds — bold and attention-grabbing
- Custom masks — create your own shapes with CSS
When to Use Image Shapes
Image shapes work best when used intentionally. Here are the scenarios where they shine:
Team and About Pages
Circular images for team members are a design convention that users understand. They add warmth and personality to your about page while keeping the layout clean.
Hero Sections
An arch-shaped or organic image in your hero section can create a memorable first impression that sets your brand apart from competitors using standard layouts.
Portfolio and Gallery Sections
Mixing image shapes in a portfolio section creates visual rhythm and draws the eye through your work in a more engaging way.
Limit yourself to 2 image shapes per page maximum. Using too many different shapes creates visual chaos rather than visual interest.
How to Apply Image Shapes in Squarespace
- Select an image block in your Squarespace editor
- Click on the "Design" tab in the image settings
- Choose from the available shapes or apply a border-radius
- Adjust the aspect ratio to ensure the subject isn't cropped awkwardly
- Preview on mobile — shapes should look great at all sizes
Common Mistakes with Image Shapes
- Cropping important content — always check that faces and key details aren't cut off
- Overusing shapes — one or two per page is enough
- Ignoring accessibility — ensure alt text still describes the full image
- Not testing at different sizes — shapes can look great on desktop but odd on mobile
The best design decisions are invisible. Image shapes should enhance your content, not distract from it.
Want to create a visually stunning Squarespace website with intentional design details? Let's talk about your project.
