The Stencils tool applies creative shape effects to your Squarespace content using SVG masking techniques. Transform images, videos, buttons, maps, and section backgrounds from standard rectangles into custom shapes, creating modern clipping effects that make your content visually distinctive. You can choose from a comprehensive library of pre-designed shapes or upload your own custom SVG files.
Accessing Stencils
The Stencils tool is available for image blocks, video blocks, button blocks, map blocks, and section backgrounds. To access the tool:
- Select the block or section you want to modify
- Open the SquareKicker Extension
- Navigate to the Advanced tab
- Select Stencils from the menu
Shape Library
Stencils includes over 60 pre-designed shapes organized into two categories:
Animated Shapes These shapes appear at the top of the library and include subtle motion effects that add visual interest to your content without requiring additional configuration.
Static Shapes
The majority of the library consists of static shapes including:
- Geometric patterns (circles, hexagons, triangles, diamonds)
- Organic forms (blobs, flowing ribbons, abstract shapes)
- Familiar shapes like arrows, stars, and shields
- All standard Squarespace shapes plus many new options
Custom SVG Upload
Upload your own SVG files to create branded shape effects:
- Click the plus icon in the shape library
- Select your SVG file from your computer
- Your custom shape will appear at the top of the library
- Select it to apply to your content
Size and Position Controls
After selecting a shape, you can customize how it appears:
Mask Size
- Use the slider to control how much of your original content shows through the shape
- Smaller values create tighter cropping
- Larger values reveal more of the original content
- Range: 0-100% with precise percentage control
Mask Position
- Visual position picker allows you to place the mask exactly where needed
- Works like Squarespace's native focal point tool
- Drag the dot on the grid to reposition your content within the shape
- Optionally enter specific horizontal and vertical values for precise control
- Default position: center (50%, 50%)
Block-Specific Applications
Image Blocks Apply shape masks directly to image content while maintaining image quality and responsiveness.
Video Blocks
Create focus with shaped video content. Works best with uploaded videos rather than YouTube or Vimeo embeds. Consider setting videos to Mute, Autoplay, and Loop for seamless background-style displays, using Squarespace settings.
Button Blocks Transform standard rectangular buttons into custom shapes while maintaining functionality.
Map Blocks Apply creative shapes to embedded maps for unique layout integration.
Section Backgrounds
When applying Stencils to section backgrounds:
- Add your image, video, or art background through Squarespace's section settings first
- Open the Extension on your section, navigate to the Advanced tab, and open Stencils
- Select your shape and adjust size and position
- Use Section Fill to choose a color for the negative space around your shape
Section Fill controls what color appears in the area outside your shape, giving you complete control over the design's color scheme. The default color is the body color in your Squarespace settings.
Best Practices
- Content Visibility: Ensure important content (faces, key text, focal points) remains visible within your chosen shape using position controls
- Brand Consistency: Use similar shape styles throughout your site to create a cohesive visual language
- Mobile Testing: Preview shaped content on mobile devices to ensure effectiveness at smaller screen sizes
- Performance: Stencils use efficient CSS masking with broad browser support and minimal impact on site speed
- Shape Selection: Match shape choices to your brand personality—geometric shapes for professional brands, organic shapes for creative industries
- Custom SVGs: Optimize SVG files for web use before uploading to ensure proper rendering and performance
What are SVGs
SVG stands for Scalable Vector Graphics. Unlike regular image files (JPG, PNG), SVG files are made up of mathematical descriptions of shapes and paths rather than pixels. This means they:
- Scale to any size without losing quality
- Have very small file sizes - as such, there is a file size limit of 250 KB
- Work perfectly as masks because they define clear shape boundaries
- Are supported by all modern web browsers
Common design software like Adobe Illustrator, Figma, and Canva can create and export SVG files. There are a number of ways that you can convert an existing JPG or PNG to an SVG, such as Vectorizer. Be sure to check the file size that your software outputs, as this will indicate whether you've created a quality SVG file. Bear in mind that in the Stencils tool, you'll only use the shape of the image, so color detail is unnecessary. Rather than making an SVG, if you're after a specific shape, you might be able to find it in a library like Font Awesome or Icons8.