How to Transform Video and Images with Creative Shape Effects Using Stencils
Standard rectangular layouts are everywhere on the web, but what if you could easily transform your images, videos, buttons, maps, and section backgrounds into creative shapes? SquareKicker's Stencils tool makes it simple to apply professional shape effects to your Squarespace content without any coding required.
This tutorial will walk you through everything you need to know about using Stencils to create modern clipping effects that make your content stand out.
What is the Stencils Tool
Stencils applies SVG masks to your Squarespace content, working like a digital stencil that reveals only the parts of your content within the chosen shape. You can apply these effects to a number of block types including: images, videos, buttons, maps, and section backgrounds.
The tool includes over 60 pre-designed shapes plus the ability to upload your own custom SVG files, giving you complete creative control over how your content appears.
Where to Find Stencils
The Stencils tool is located in the Advanced tab of the SquareKicker Extension. Here's how to access it:
Select an image, video, button, or map block
Open the SquareKicker Extension
Click on the Advanced tab
Select Stencils
For section backgrounds, follow the same process but select your section instead of a block.
Understanding the Shape Library
When you open Stencils, you'll see a library organized into two main categories:
Animated Shapes appear at the top of the library. These shapes include subtle motion effects that add engagement to your content without requiring additional setup.
Static Shapes fill the rest of the library and include geometric patterns, organic forms, and handy shapes like arrows. All familiar Squarespace shapes are included, plus many new options.
How to Upload Custom SVG Shapes
To use your own custom shapes:
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 it to your content
Custom SVGs are perfect for using logos, brand icons, or unique shapes that align with your business identity. Your uploaded shapes will remain available for future use across your site.
Creating animated SVG masks for Squarespace
Follow this complete tutorial to build animated SVGs with Xyris and a tailored ChatGPT prompt.
Controlling Size and Position
Once you've selected a shape, you'll see controls for size and positioning:
Size Control: Use the slider to adjust how much of your original content shows through the shape. Smaller values create tighter cropping, while larger values reveal more of the original content, creating a larger shape.
Position Control: The positioning grid works like Squarespace's native focal point tool. Drag the dot to reposition which part of your content appears within the shape, or enter specific values for precise control.
These controls ensure your most important content remains visible regardless of which shape you choose.
Applying Stencils to Video Blocks
Video blocks work particularly well with Stencils, creating engaging content. Here's how to optimize shaped videos:
Upload your video directly to Squarespace rather than using YouTube or Vimeo embeds
Apply your chosen shape through Stencils
Adjust size and position as needed
Optionally, set your video to Mute, Autoplay, and Loop in Squarespace's video settings, for a continuous display
This creates seamless background-style video displays that feel polished and professional.
Working with Section Backgrounds
To apply Stencils to section backgrounds:
Add your background image, video, or color through Squarespace's section settings
Open the SquareKicker Extension on your section
Navigate to Advanced > Stencils
Choose your shape and adjust the size
Use the Section Fill option to choose a color for the area outside your shape
The Section Fill feature lets you control what color appears in the negative space around your shaped background, giving you complete control over your design's color scheme.
Combining Stencils with Other Features
Stencils work well alongside other SquareKicker features. You can layer in:
Hover effects for interactive shape changes
Scrolling effects for dynamic animations
Magnetic motion for engaging micro-interactions
Fixed scrolling for sophisticated parallax effects
These combinations help create unique designs that engage visitors while maintaining professional polish. Watch the tutorial (above) to see what effects can be created with a combination of tools, or have a look at other SquareKicker tutorials, for more ideas.
Shape Selection Tips
Different shapes work better for different types of content and industries:
Circles work well for portraits, headshots, and personal branding content where you want to focus attention on faces.
Geometric shapes like hexagons or triangles suit tech companies, consulting firms, or architectural portfolios where clean lines communicate precision.
Organic shapes and flowing forms fit creative industries, wellness brands, or any business wanting to move away from rigid corporate aesthetics.
Custom shapes using your logo or brand icons help maintain consistent visual identity across your entire website.
Best Practices for Using Stencils
Consider Your Content: Make sure your most important content remains visible within your chosen shape. Use the positioning controls to keep faces, key text, or focal points properly framed.
Maintain Consistency: Once you choose a shape style for your brand, use variations of it throughout your site to create a cohesive visual language.
Test on Mobile: Preview your shaped content on mobile devices to ensure it remains effective at smaller screen sizes.
Performance: Stencils use efficient CSS masking that works across modern browsers without impacting site speed.
Getting Started
Start by experimenting with the pre-designed shapes on different types of content to see what works best for your brand and design goals.
The tool provides real-time preview, so you can see exactly how your content will look as you make adjustments. This makes it easy to experiment with different shapes and positioning until you achieve the perfect result.
Whether you're looking to add subtle sophistication or bold creative flair to your Squarespace site, Stencils provides the tools you need to transform ordinary rectangular content into engaging visual experiences.
