[{"data":1,"prerenderedAt":132},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements":3},{"id":4,"title":5,"body":6,"category":120,"description":121,"extension":122,"keywords":123,"meta":124,"navigation":125,"order":126,"path":127,"seo":128,"stem":129,"updated":130,"__hash__":131},"help\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements.md","Mask elements",{"type":7,"value":8,"toc":113},"minimark",[9,13,23,28,38,45,49,56,73,76,80,87,106,110],[10,11,12],"p",{},"A mask uses the shape of one element to clip another, so the masked element only shows where the two overlap. It is the way to crop an image to a shape, for example.",[14,15,16],"blockquote",{},[10,17,18,22],{},[19,20,21],"strong",{},"You don't need a mask just to round an image."," Image elements can round their own corners, all the way up to a full circle.",[24,25,27],"h2",{"id":26},"create-a-mask","Create a mask",[10,29,30,31,34,35,37],{},"Select the ",[19,32,33],{},"masking element first"," (the shape that does the clipping), then the element you want to mask, and click ",[19,36,5],{}," in the Toolbar. You need at least two elements selected.",[10,39,40],{},[41,42],"img",{"alt":43,"src":44},"","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F09fbe64f-a592-4002-e468-a46be6358600\u002Fpublic",[24,46,48],{"id":47},"the-two-slots","The two slots",[10,50,51,52,55],{},"A mask holds two slots, both visible in the ",[19,53,54],{},"Layer Panel",":",[57,58,59,67],"ul",{},[60,61,62,63,66],"li",{},"the ",[19,64,65],{},"Masking Layers"," slot: the shape that clips.",[60,68,62,69,72],{},[19,70,71],{},"Masked Layers"," slot: what shows through it.",[10,74,75],{},"Each slot can hold more than one element. Drag elements into and out of the slots in the Layer Panel to change what is masked, or what does the masking.",[24,77,79],{"id":78},"options","Options",[10,81,82,83,86],{},"In the ",[19,84,85],{},"Property Panel",", a mask has two options:",[57,88,89,100],{},[60,90,91,94,95,99],{},[19,92,93],{},"Invert",": show the content ",[96,97,98],"em",{},"outside"," the shape instead of inside it.",[60,101,102,105],{},[19,103,104],{},"Color masking",": use the masking element's colour and brightness to set transparency, instead of just its outline.",[24,107,109],{"id":108},"remove-a-mask","Remove a mask",[10,111,112],{},"To undo a mask, drag its elements out of both slots in the Layer Panel, then delete the now-empty mask.",{"title":43,"searchDepth":114,"depth":114,"links":115},2,[116,117,118,119],{"id":26,"depth":114,"text":27},{"id":47,"depth":114,"text":48},{"id":78,"depth":114,"text":79},{"id":108,"depth":114,"text":109},"design-elements-and-tools","Use one element to clip another so images and shapes show only where you want them.","md",[],{},true,50,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements",{"title":5,"description":121},"help\u002Fdesign-elements-and-tools\u002Fmask-elements","2026-06-12","kOIyCgvPNC2UEgXHWrwjTuIHKE8Mj_Wv5gkXrhjejY4",1787923688804]