[{"data":1,"prerenderedAt":601},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms":3},{"id":4,"title":5,"body":6,"category":565,"description":566,"extension":567,"keywords":568,"meta":591,"navigation":592,"order":593,"path":594,"published":595,"rawbody":596,"seo":597,"stem":598,"updated":599,"__hash__":600},"help\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms.md","Appearance, effects and transforms",{"type":7,"value":8,"toc":555},"minimark",[9,37,57,61,69,164,187,190,242,245,271,284,290,311,318,325,330,343,362,365,368,433,436,523,530],[10,11,12,13,17,18,22,23,26,27,30,31,36],"p",{},"In the ",[14,15,16],"place",{},"properties panel",", three sections decide how an element looks: ",[19,20,21],"strong",{},"Appearance"," for outline, corners and opacity, ",[19,24,25],{},"Transforms"," for rotating, scaling and skewing, and ",[19,28,29],{},"Filters & Effects"," for shadows, filters and links. How to set colors and gradients is explained in ",[32,33,35],"a",{"href":34},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients","Set colors and gradients",".",[10,38,39,40,43,44,47,48,50,51,53,54,56],{},"You see the sections when you select an element on the ",[14,41,42],{},"canvas"," or in the ",[14,45,46],{},"layers panel",". A click on a section title expands or collapses it. ",[19,49,25],{}," and ",[19,52,29],{}," start collapsed, and for groups and masks ",[19,55,21],{}," does too.",[58,59,21],"h2",{"id":60},"appearance",[10,62,63],{},[64,65],"img",{"alt":66,"src":67,"width":68},"Appearance section of a rectangle with Fill Color and Stroke Color ticked: Stroke Width, Stroke Alignment, Dash, Offset, Corner Radius with the Individual corners button, Opacity and Visibility.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-04\u002Fpublic",938,[70,71,72,85,91,97,118,132,138,148,154],"ul",{},[73,74,75,78,79,82,83,36],"li",{},[19,76,77],{},"Fill Color",": fills the element with a color or a gradient. For rectangles, ellipses, paths, texts, groups and masks. Images have no fill; you color them with ",[19,80,81],{},"Color Masking"," under ",[19,84,29],{},[73,86,87,90],{},[19,88,89],{},"Stroke Color",": gives the element an outline, in a color or a gradient. For all elements.",[73,92,93,96],{},[19,94,95],{},"Stroke Width",": the width of the outline. When you turn the outline on, it is 5 pixels wide, 2 for texts.",[73,98,99,102,103,106,107,110,111,114,115,117],{},[19,100,101],{},"Stroke Alignment",": whether the outline sits inside (",[19,104,105],{},"Inside","), centered on (",[19,108,109],{},"Center",") or outside (",[19,112,113],{},"Outside",") the edge. ",[19,116,109],{}," by default. Not available for the outline of a text's letters.",[73,119,120,123,124,127,128,131],{},[19,121,122],{},"Dash",": a solid, dashed or dotted outline. The menu shows the three lines as a preview. For a dashed or dotted line, ",[19,125,126],{},"Length"," for the length of the dashes and ",[19,129,130],{},"Gap"," for the gaps appear.",[73,133,134,137],{},[19,135,136],{},"Offset",": shifts the dashes along the outline.",[73,139,140,143,144,147],{},[19,141,142],{},"Corner Radius",": rounds the corners. For rectangles, images, groups and masks. With the button next to it (",[19,145,146],{},"Individual corners","), you set each corner on its own.",[73,149,150,153],{},[19,151,152],{},"Opacity",": from 0 (invisible) to 100 (fully visible).",[73,155,156,159,160,36],{},[19,157,158],{},"Visibility",": hides and shows the element with the eye icon. When you connect it to a checkbox input field, users switch the element on and off themselves. See ",[32,161,163],{"href":162},"\u002Fhelp\u002Finput-fields\u002Fshow-or-hide-element","Create a checkbox input field: let users show or hide an element",[10,165,166,167,50,170,173,174,178,179,50,183,36],{},"Groups and masks also have ",[19,168,169],{},"Background Clip",[19,171,172],{},"Padding"," for their fill, and texts have properties of their own for their background. They are explained in ",[32,175,177],{"href":176},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements","Group elements: move and arrange them together",", ",[32,180,182],{"href":181},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements","Mask elements: crop an image to a shape",[32,184,186],{"href":185},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftext-settings","Text properties",[58,188,25],{"id":189},"transforms",[70,191,192,208,219,230],{},[73,193,194,197,198,50,201,204,205,36],{},[19,195,196],{},"Translate",": moves the element by extra pixels, with ",[19,199,200],{},"X",[19,202,203],{},"Y",". You set the actual position under ",[19,206,207],{},"Position & Size",[73,209,210,213,214,50,216,218],{},[19,211,212],{},"Scale",": stretches or shrinks the element, with ",[19,215,200],{},[19,217,203],{},". 1 is the original size, 2 is double.",[73,220,221,224,225,82,228,36],{},[19,222,223],{},"Rotate",": turns the element by the given degrees. For rectangles and ellipses, the same value also shows as ",[19,226,227],{},"Rotation",[19,229,207],{},[73,231,232,235,236,50,239,36],{},[19,233,234],{},"Skew",": slants the element, with ",[19,237,238],{},"X °",[19,240,241],{},"Y °",[10,243,244],{},"Texts have two more settings at the end:",[70,246,247,261],{},[73,248,249,252,253,256,257,260],{},[19,250,251],{},"Rotate Text",": ",[19,254,255],{},"Line °"," turns each line, ",[19,258,259],{},"Char °"," turns each letter on its own.",[73,262,263,266,267,50,269,36],{},[19,264,265],{},"Skew Lines",": slants each line, with ",[19,268,238],{},[19,270,241],{},[10,272,273,274,277,278,280,281,283],{},"Rotating, scaling and skewing work around the element's ",[19,275,276],{},"Origin",". For groups, it is at the top of ",[19,279,25],{},"; for rectangles, ellipses, paths, texts and images, it is under ",[19,282,207],{},". Masks have no Origin of their own.",[10,285,286,287,289],{},"You can also rotate right on the ",[14,288,42],{},": when you move the pointer just outside a corner of the selected element, it turns into a rotate arrow. Dragging then turns the element.",[10,291,292,294,295,297,298,302,303,306,307,36],{},[19,293,152],{}," and the values under ",[19,296,25],{}," can be animated with keyframes, see ",[32,299,301],{"href":300},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation","Animate a template: make a video with moving elements",". Only images can be mirrored, with ",[19,304,305],{},"Flip"," in the ",[32,308,310],{"href":309},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode#image","image properties",[10,312,313],{},[64,314],{"alt":315,"src":316,"width":317},"Transforms section of a rectangle: Translate, Scale, Rotate set to 20 and Skew.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-02\u002Fpublic",343,[10,319,320],{},[64,321],{"alt":322,"src":323,"width":324},"The rectangle rotated by 20° on the canvas.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-03\u002Fpublic",950,[326,327,329],"h3",{"id":328},"rotated-elements-and-the-anchoring-tool","Rotated elements and the anchoring tool",[10,331,332,333,337,338,340,341,36],{},"The ",[32,334,336],{"href":335},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fanchoring-tool","anchoring tool"," also works with rotated elements, with some limits. This applies as soon as any value under ",[19,339,25],{}," differs from its default, not only ",[19,342,223],{},[70,344,345,352,359],{},[73,346,347,348,36],{},"The tool uses the upright box around the rotated element. While you drag, its label contains ",[349,350,351],"code",{},".bbox",[73,353,354,355,358],{},"A rotated element connects edge to edge only. ",[19,356,357],{},"Surfaces"," and the size handles are not available for it.",[73,360,361],{},"A rotated group cannot be connected. The same goes for elements inside a rotated group, and for rotated elements inside a group or mask.",[58,363,29],{"id":364},"filters-effects",[10,366,367],{},"Each effect has a checkbox. When you tick it, its settings appear below it. When you untick it, the effect is gone. Which effects you see depends on the element:",[70,369,370,384,417,424],{},[73,371,372,252,375,178,378,50,381,36],{},[19,373,374],{},"Rectangles, ellipses, paths and texts",[19,376,377],{},"Drop Shadow",[19,379,380],{},"Invert",[19,382,383],{},"Hue Rotate",[73,385,386,389,390,178,393,178,396,178,399,178,402,178,405,178,408,178,411,50,414,36],{},[19,387,388],{},"Images, groups and masks",": also ",[19,391,392],{},"Blur",[19,394,395],{},"Grayscale",[19,397,398],{},"Sepia",[19,400,401],{},"Filter Opacity",[19,403,404],{},"Exposure",[19,406,407],{},"Contrast",[19,409,410],{},"Saturate",[19,412,413],{},"Brightness",[19,415,416],{},"Gradient Map",[73,418,419,389,422,36],{},[19,420,421],{},"Images",[19,423,81],{},[73,425,426,252,429,432],{},[19,427,428],{},"All elements",[19,430,431],{},"Link"," at the top of the section.",[10,434,435],{},"The effects in the order of the section:",[70,437,438,443,448,458,470,479,484,493,514],{},[73,439,440,442],{},[19,441,431],{},": makes the whole element a clickable link, for example in a PDF export. You type the web address into the field below it.",[73,444,445,447],{},[19,446,81],{}," (images): colors all visible parts of the image in a color or a gradient; transparent parts stay empty. Good for icons and logos with a transparent background. A photo without transparent areas becomes a single-color area. Starts with black.",[73,449,450,452,453,50,455,457],{},[19,451,392],{},": makes the element blurry, with separate values for ",[19,454,200],{},[19,456,203],{},". Starts at 0.",[73,459,460,462,463,50,466,469],{},[19,461,377],{},": a shadow behind the element. You set the angle (°), distance (↘), color, opacity, ",[19,464,465],{},"blur",[19,467,468],{},"quality",". It starts as a sharp black shadow, 10 pixels below the element.",[73,471,472,178,474,50,476,478],{},[19,473,395],{},[19,475,398],{},[19,477,380],{},": the strength goes from 0 to 1. They start at 0, so you only see a change once you raise the value.",[73,480,481,483],{},[19,482,383],{},": shifts all colors around the color wheel, from 0 to 360°. Starts at 0.",[73,485,486,488,489,82,491,36],{},[19,487,401],{},": an extra transparency from 0 to 1. Starts at 1. For normal transparency, use ",[19,490,152],{},[19,492,21],{},[73,494,495,178,497,178,499,50,501,503,504,178,507,50,510,513],{},[19,496,404],{},[19,498,407],{},[19,500,410],{},[19,502,413],{},": one value each for ",[19,505,506],{},"Red",[19,508,509],{},"Green",[19,511,512],{},"Blue",", from 0 to 1. They start at 0.5.",[73,515,516,518,519,522],{},[19,517,416],{},": colors the element by brightness. Dark areas take the colors at the start of the gradient under ",[19,520,521],{},"Color Stops",", light areas those at the end. It starts with black to white. The plus below the list adds a color.",[10,524,525],{},[64,526],{"alt":527,"src":528,"width":529},"Filters & Effects section with Drop Shadow ticked and its settings for angle, distance, color, opacity and blur.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-01\u002Fpublic",348,[531,532,533],"related",{},[70,534,535,539,545,551],{},[73,536,537],{},[32,538,35],{"href":34},[73,540,541],{},[32,542,544],{"href":543},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode","Image properties",[73,546,547],{},[32,548,550],{"href":549},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements","Design elements (images, text, shapes)",[73,552,553],{},[32,554,301],{"href":300},{"title":556,"searchDepth":557,"depth":557,"links":558},"",2,[559,560,564],{"id":60,"depth":557,"text":21},{"id":189,"depth":557,"text":25,"children":561},[562],{"id":328,"depth":563,"text":329},3,{"id":364,"depth":557,"text":29},"design-elements-and-tools","All properties of the Appearance, Transforms and Filters & Effects sections: outline, corners, opacity, rotation, shadows, filters and links.","md",[21,569,570,571,572,122,25,573,574,575,576,29,577,465,578,579,580,581,582,431,583,584,585,586,587,588,589,590],"opacity","visibility","stroke","corner radius","translate","scale","rotate","skew","drop shadow","grayscale","sepia","hue rotate","invert","gradient map","outline","shadow","effects","filters","Deckkraft","Schatten","Effekte","drehen",{},true,27,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms","2026-10-13","---\ntitle: \"Appearance, effects and transforms\"\ndescription: \"All properties of the Appearance, Transforms and Filters & Effects sections: outline, corners, opacity, rotation, shadows, filters and links.\"\ncategory: design-elements-and-tools\norder: 27\nkeywords: [\"Appearance\", \"opacity\", \"visibility\", \"stroke\", \"corner radius\", \"Dash\", \"Transforms\", \"translate\", \"scale\", \"rotate\", \"skew\", \"Filters & Effects\", \"drop shadow\", \"blur\", \"grayscale\", \"sepia\", \"hue rotate\", \"invert\", \"gradient map\", \"Link\", \"outline\", \"shadow\", \"effects\", \"filters\", \"Deckkraft\", \"Schatten\", \"Effekte\", \"drehen\"]\n---\nIn the :place[properties panel], three sections decide how an element looks: **Appearance** for outline, corners and opacity, **Transforms** for rotating, scaling and skewing, and **Filters & Effects** for shadows, filters and links. How to set colors and gradients is explained in [Set colors and gradients](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients).\n\nYou see the sections when you select an element on the :place[canvas] or in the :place[layers panel]. A click on a section title expands or collapses it. **Transforms** and **Filters & Effects** start collapsed, and for groups and masks **Appearance** does too.\n\n## Appearance\n\n![Appearance section of a rectangle with Fill Color and Stroke Color ticked: Stroke Width, Stroke Alignment, Dash, Offset, Corner Radius with the Individual corners button, Opacity and Visibility.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-04\u002Fpublic){width=\"938\"}\n\n- **Fill Color**: fills the element with a color or a gradient. For rectangles, ellipses, paths, texts, groups and masks. Images have no fill; you color them with **Color Masking** under **Filters & Effects**.\n- **Stroke Color**: gives the element an outline, in a color or a gradient. For all elements.\n- **Stroke Width**: the width of the outline. When you turn the outline on, it is 5 pixels wide, 2 for texts.\n- **Stroke Alignment**: whether the outline sits inside (**Inside**), centered on (**Center**) or outside (**Outside**) the edge. **Center** by default. Not available for the outline of a text's letters.\n- **Dash**: a solid, dashed or dotted outline. The menu shows the three lines as a preview. For a dashed or dotted line, **Length** for the length of the dashes and **Gap** for the gaps appear.\n- **Offset**: shifts the dashes along the outline.\n- **Corner Radius**: rounds the corners. For rectangles, images, groups and masks. With the button next to it (**Individual corners**), you set each corner on its own.\n- **Opacity**: from 0 (invisible) to 100 (fully visible).\n- **Visibility**: hides and shows the element with the eye icon. When you connect it to a checkbox input field, users switch the element on and off themselves. See [Create a checkbox input field: let users show or hide an element](\u002Fhelp\u002Finput-fields\u002Fshow-or-hide-element).\n\nGroups and masks also have **Background Clip** and **Padding** for their fill, and texts have properties of their own for their background. They are explained in [Group elements: move and arrange them together](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements), [Mask elements: crop an image to a shape](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements) and [Text properties](\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftext-settings).\n\n## Transforms\n\n- **Translate**: moves the element by extra pixels, with **X** and **Y**. You set the actual position under **Position & Size**.\n- **Scale**: stretches or shrinks the element, with **X** and **Y**. 1 is the original size, 2 is double.\n- **Rotate**: turns the element by the given degrees. For rectangles and ellipses, the same value also shows as **Rotation** under **Position & Size**.\n- **Skew**: slants the element, with **X °** and **Y °**.\n\nTexts have two more settings at the end:\n\n- **Rotate Text**: **Line °** turns each line, **Char °** turns each letter on its own.\n- **Skew Lines**: slants each line, with **X °** and **Y °**.\n\nRotating, scaling and skewing work around the element's **Origin**. For groups, it is at the top of **Transforms**; for rectangles, ellipses, paths, texts and images, it is under **Position & Size**. Masks have no Origin of their own.\n\nYou can also rotate right on the :place[canvas]: when you move the pointer just outside a corner of the selected element, it turns into a rotate arrow. Dragging then turns the element.\n\n**Opacity** and the values under **Transforms** can be animated with keyframes, see [Animate a template: make a video with moving elements](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation). Only images can be mirrored, with **Flip** in the [image properties](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode#image).\n\n![Transforms section of a rectangle: Translate, Scale, Rotate set to 20 and Skew.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-02\u002Fpublic){width=\"343\"}\n\n![The rectangle rotated by 20° on the canvas.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-03\u002Fpublic){width=\"950\"}\n\n### Rotated elements and the anchoring tool\n\nThe [anchoring tool](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fanchoring-tool) also works with rotated elements, with some limits. This applies as soon as any value under **Transforms** differs from its default, not only **Rotate**.\n\n- The tool uses the upright box around the rotated element. While you drag, its label contains `.bbox`.\n- A rotated element connects edge to edge only. **Surfaces** and the size handles are not available for it.\n- A rotated group cannot be connected. The same goes for elements inside a rotated group, and for rotated elements inside a group or mask.\n\n## Filters & Effects\n\nEach effect has a checkbox. When you tick it, its settings appear below it. When you untick it, the effect is gone. Which effects you see depends on the element:\n\n- **Rectangles, ellipses, paths and texts**: **Drop Shadow**, **Invert** and **Hue Rotate**.\n- **Images, groups and masks**: also **Blur**, **Grayscale**, **Sepia**, **Filter Opacity**, **Exposure**, **Contrast**, **Saturate**, **Brightness** and **Gradient Map**.\n- **Images**: also **Color Masking**.\n- **All elements**: **Link** at the top of the section.\n\nThe effects in the order of the section:\n\n- **Link**: makes the whole element a clickable link, for example in a PDF export. You type the web address into the field below it.\n- **Color Masking** (images): colors all visible parts of the image in a color or a gradient; transparent parts stay empty. Good for icons and logos with a transparent background. A photo without transparent areas becomes a single-color area. Starts with black.\n- **Blur**: makes the element blurry, with separate values for **X** and **Y**. Starts at 0.\n- **Drop Shadow**: a shadow behind the element. You set the angle (°), distance (↘), color, opacity, **blur** and **quality**. It starts as a sharp black shadow, 10 pixels below the element.\n- **Grayscale**, **Sepia** and **Invert**: the strength goes from 0 to 1. They start at 0, so you only see a change once you raise the value.\n- **Hue Rotate**: shifts all colors around the color wheel, from 0 to 360°. Starts at 0.\n- **Filter Opacity**: an extra transparency from 0 to 1. Starts at 1. For normal transparency, use **Opacity** under **Appearance**.\n- **Exposure**, **Contrast**, **Saturate** and **Brightness**: one value each for **Red**, **Green** and **Blue**, from 0 to 1. They start at 0.5.\n- **Gradient Map**: colors the element by brightness. Dark areas take the colors at the start of the gradient under **Color Stops**, light areas those at the end. It starts with black to white. The plus below the list adds a color.\n\n![Filters & Effects section with Drop Shadow ticked and its settings for angle, distance, color, opacity and blur.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-01\u002Fpublic){width=\"348\"}\n\n::related\n- [Set colors and gradients](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients)\n- [Image properties](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode)\n- [Design elements (images, text, shapes)](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements)\n- [Animate a template: make a video with moving elements](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation)\n::\n",{"title":5,"description":566},"help\u002Fdesign-elements-and-tools\u002Feffects-and-transforms","2026-10-22","95KHwUcfVlzyvcvP6_EhkBpuENhK-dtHEYUXYVpd700",1792680561213]