# Appearance, effects and transforms > All properties of the Appearance, Transforms and Filters & Effects sections: outline, corners, opacity, rotation, shadows, filters and links. Source: https://bluepic.io/help/design-elements-and-tools/effects-and-transforms Language: en Category: design-elements-and-tools Last updated: 2026-10-22 In the 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](https://bluepic.io/help/design-elements-and-tools/colors-and-gradients). You see the sections when you select an element on the canvas or in the 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. ## Appearance ![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://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-effects-and-transforms-04/public){width="938"} - **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**. - **Stroke Color**: gives the element an outline, in a color or a gradient. For all elements. - **Stroke Width**: the width of the outline. When you turn the outline on, it is 5 pixels wide, 2 for texts. - **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. - **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. - **Offset**: shifts the dashes along the outline. - **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. - **Opacity**: from 0 (invisible) to 100 (fully visible). - **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](https://bluepic.io/help/input-fields/show-or-hide-element). Groups 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](https://bluepic.io/help/design-elements-and-tools/group-elements), [Mask elements: crop an image to a shape](https://bluepic.io/help/design-elements-and-tools/mask-elements) and [Text properties](https://bluepic.io/help/design-elements-and-tools/text-settings). ## Transforms - **Translate**: moves the element by extra pixels, with **X** and **Y**. You set the actual position under **Position & Size**. - **Scale**: stretches or shrinks the element, with **X** and **Y**. 1 is the original size, 2 is double. - **Rotate**: turns the element by the given degrees. For rectangles and ellipses, the same value also shows as **Rotation** under **Position & Size**. - **Skew**: slants the element, with **X °** and **Y °**. Texts have two more settings at the end: - **Rotate Text**: **Line °** turns each line, **Char °** turns each letter on its own. - **Skew Lines**: slants each line, with **X °** and **Y °**. Rotating, 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. You can also rotate right on the 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. **Opacity** and the values under **Transforms** can be animated with keyframes, see [Animate a template: make a video with moving elements](https://bluepic.io/help/design-elements-and-tools/video-and-animation). Only images can be mirrored, with **Flip** in the [image properties](https://bluepic.io/help/design-elements-and-tools/image-cover-mode#image). ![Transforms section of a rectangle: Translate, Scale, Rotate set to 20 and Skew.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-effects-and-transforms-02/public){width="343"} ![The rectangle rotated by 20° on the canvas.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-effects-and-transforms-03/public){width="950"} ### Rotated elements and the anchoring tool The [anchoring tool](https://bluepic.io/help/design-elements-and-tools/anchoring-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**. - The tool uses the upright box around the rotated element. While you drag, its label contains `.bbox`. - A rotated element connects edge to edge only. **Surfaces** and the size handles are not available for it. - A rotated group cannot be connected. The same goes for elements inside a rotated group, and for rotated elements inside a group or mask. ## Filters & Effects 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: - **Rectangles, ellipses, paths and texts**: **Drop Shadow**, **Invert** and **Hue Rotate**. - **Images, groups and masks**: also **Blur**, **Grayscale**, **Sepia**, **Filter Opacity**, **Exposure**, **Contrast**, **Saturate**, **Brightness** and **Gradient Map**. - **Images**: also **Color Masking**. - **All elements**: **Link** at the top of the section. The effects in the order of the section: - **Link**: makes the whole element a clickable link, for example in a PDF export. You type the web address into the field below it. - **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. - **Blur**: makes the element blurry, with separate values for **X** and **Y**. Starts at 0. - **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. - **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. - **Hue Rotate**: shifts all colors around the color wheel, from 0 to 360°. Starts at 0. - **Filter Opacity**: an extra transparency from 0 to 1. Starts at 1. For normal transparency, use **Opacity** under **Appearance**. - **Exposure**, **Contrast**, **Saturate** and **Brightness**: one value each for **Red**, **Green** and **Blue**, from 0 to 1. They start at 0.5. - **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. ![Filters & Effects section with Drop Shadow ticked and its settings for angle, distance, color, opacity and blur.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-effects-and-transforms-01/public){width="348"} ## Related articles - [Set colors and gradients](https://bluepic.io/help/design-elements-and-tools/colors-and-gradients) - [Image properties](https://bluepic.io/help/design-elements-and-tools/image-cover-mode) - [Design elements (images, text, shapes)](https://bluepic.io/help/design-elements-and-tools/design-elements) - [Animate a template: make a video with moving elements](https://bluepic.io/help/design-elements-and-tools/video-and-animation)