[{"data":1,"prerenderedAt":133},["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,"rawbody":128,"seo":129,"stem":130,"updated":131,"__hash__":132},"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","---\ntitle: \"Mask elements\"\ndescription: \"Use one element to clip another so images and shapes show only where you want them.\"\ncategory: design-elements-and-tools\norder: 50\nkeywords: []\n---\nA 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.\n\n> **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.\n\n## Create a mask\n\nSelect the **masking element first** (the shape that does the clipping), then the element you want to mask, and click **Mask elements** in the Toolbar. You need at least two elements selected.\n\n![](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F09fbe64f-a592-4002-e468-a46be6358600\u002Fpublic)\n\n## The two slots\n\nA mask holds two slots, both visible in the **Layer Panel**:\n\n- the **Masking Layers** slot: the shape that clips.\n- the **Masked Layers** slot: what shows through it.\n\nEach 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.\n\n## Options\n\nIn the **Property Panel**, a mask has two options:\n\n- **Invert**: show the content *outside* the shape instead of inside it.\n- **Color masking**: use the masking element's colour and brightness to set transparency, instead of just its outline.\n\n## Remove a mask\n\nTo undo a mask, drag its elements out of both slots in the Layer Panel, then delete the now-empty mask.\n",{"title":5,"description":121},"help\u002Fdesign-elements-and-tools\u002Fmask-elements","2026-06-12","k0HrX2UHdiYJpf5cPfCuknAi0_WUaWw3au-VjeNV7p4",1789292811099]