5f:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3q5d1avmchlp0.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/149w-u4or12up.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/17pioewhhzr_j.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/3fr1ev83fgwky.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js"],"PostDetailCard"] 60:T96c,

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

5c:[["$","$L5f",null,{"post":{"id":"019e9980-e46e-7129-b199-47c346107aae","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"EnoL6qpAqiBeocb7SYrp","resolved":true,"title":"Quick Image Mask","body":"$60","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Quick Image Mask"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple built-in mask shapes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Circle, Star, Diamond, Square, Rectangle, and Custom modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom mask support using SVG or PNG files"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works with external assets or masks created directly in Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easily create vectors with Framer's vector tools, export them, and reuse them as custom masks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable image scale and positioning controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent X and Y offset controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rotation support for image orientation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Star shape customization with adjustable points and inner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable corner radius controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional outline styling with custom width and color (*not available for custom masks)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in shadow system with customizable styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background color support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cover and Contain image fit modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight and optimized for performance"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Design"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"The workflow focuses on simplicity: select a shape, adjust the composition, and create visually distinctive layouts in seconds."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"The result is a component that feels fast, flexible, and highly adaptable while giving you complete control over the final composition."}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options"}],"attrs":{"level":1}},{"type":"customImage","attrs":{"alt":"","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ech3vvma-JYLB1pERy1P0R9h2JuhkxjLbkWHHQq","link":null,"caption":"","uploadId":null}}]},"introduction":"A flexible image masking component","slug":"quick-image-mask","author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/EnoL6qpAqiBeocb7SYrp/quick-image-mask-o1MNvJx3qhv3KaKf0LFSPPOBk4z4m3","metadata":{"tint":{"h":120,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-30T19:46:30.754Z","updatedAt":"2026-07-10T01:29:26.740Z","publishedAt":"2026-06-05T20:37:01.678Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://quickimagemask.framer.website/?editSite","price":"5","paymentUrl":"https://joaobaltieri.gumroad.com/l/quickimagemask","workshop":true,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"QjlBAYX1VGYO2w2m6nJq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T20:37:01.678Z","updatedAt":"2026-06-05T20:37:01.678Z","reported":false}}],"$L61"]

Suggested for you