Built to simplify the process of creating visually unique image compositions, it allows you to quickly switch between multiple mask styles while maintaining full control over scale, positioning, outlines, shadows, and shape customization.
Whether you're building hero sections, galleries, cards, or experimental layouts, Quick Image Mask helps create distinctive visuals without requiring complex masking workflows or external editing tools.
Multiple built-in mask shapes
Circle, Star, Diamond, Square, Rectangle, and Custom modes
Custom mask support using SVG or PNG files
Works with external assets or masks created directly in Framer
Easily create vectors with Framer's vector tools, export them, and reuse them as custom masks
Adjustable image scale and positioning controls
Independent X and Y offset controls
Rotation support for image orientation
Star shape customization with adjustable points and inner radius
Adjustable corner radius controls
Optional outline styling with custom width and color (*not available for custom masks)
Built-in shadow system with customizable styles
Background color support
Cover and Contain image fit modes
Lightweight and optimized for performance
This component was designed around speed and flexibility, allowing image treatments that normally require additional editing tools or custom assets to be created directly inside Framer.
The workflow focuses on simplicity: select a shape, adjust the composition, and create visually distinctive layouts in seconds.
For more personalized results, the Custom mode allows you to use your own SVG or PNG masks. These can come from external sources or be designed directly inside Framer using vector tools, exported, and immediately reused inside the component.
It integrates naturally into:
hero sections
image galleries
portfolio websites
team sections
testimonial layouts
product showcases
landing pages
editorial designs
creative visual systems
Creating custom image masks often means exporting SVG files, manually editing assets, or relying on separate design applications.
Quick Image Mask removes that extra work by making image masking part of the design process itself, allowing you to rapidly test different visual directions without interrupting your workflow.
Instead of being limited to predefined shapes, you can also build completely unique masks using your own SVG or PNG files, making the component flexible enough for both simple layouts and highly customized visual systems.
The result is a component that feels fast, flexible, and highly adaptable while giving you complete control over the final composition.
Portfolio websites
Hero image compositions
Team sections
Testimonials
Product cards
SaaS landing pages
Editorial layouts
Creative websites
Experimental compositions
Design systems
Joao Baltieri
