Skip to content

component

Quick Image Mask

By Joao Baltieri

Details

Summary

Quick Image Mask Built to simplify the process of creating visually unique image compositions, it allows you to quickly switch between multiple mask styles while maintaining full…

Description

Quick Image Mask 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. Key Features 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 Design 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. The result is a component that feels fast, flexible, and highly adaptable while giving you complete control over the final composition. Customization Options

Introduction

A flexible image masking component

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200129838/148/228/309/79/15
  • All · #2914