Element effects

Element effects change how an element looks or moves on the page, such as a shadow, a blur or movement that follows the cursor. You add them in the right panel of the editor, under the Element tab, by clicking the Effects icon (the lightning bolt). An element can have several effects at the same time.

The Effects section has two tabs. The Effect tab holds effects that are always applied, and this article covers them. The Hover effect tab holds effects that only show while a viewer hovers over the element; see Hover effects.

Adding an effect to an element

To add an effect to an element:

1. Select the element on the canvas.
2. In the right panel, open the Element tab.
3. Click the Effects icon (the lightning bolt).
4. Make sure the Effect tab is selected.
5. Click + next to the effect you want. Its settings open below it, with default values.
6. Adjust the settings.

To remove an effect, click - next to it.

Effects can't be added to charts, forms, masks or the scene itself, and not while several elements are selected at once. For these, the Effects icon is disabled. Some effects are only listed for certain element types; see Available effects.

Available effects

The Effect tab lists these effects, in this order. Which ones you see depends on the type of element you selected.

• Outer Shadow: adds a shadow behind the element. Available for all elements. Settings: Distance X, Distance Y, Color, Blur and Spread.
• Inner Shadow: adds a shadow inside the edges of the element. Available for buttons and shapes only. It has the same settings as Outer Shadow.
• Text shadow: adds a shadow behind the letters, rather than behind the text box. Available for text, heading, button and table elements. Settings: Distance X, Distance Y, Color and Spread.
• Underline: adds a line to the text. Available for text, heading, button and table elements. Settings: Color, Style (Solid or Dashed) and Type (a line under the text, over it, through it, or both under and over it).
• Greyscale: removes color from the element. Available for all elements. The slider (0 to 100) sets how much color is removed; at 100 the element is fully grey.
• Blur: makes the element look less sharp. Available for all elements. The slider sets the blur strength from 0 to 100 px.
• Blendmode: sets how the element's colors mix with what is behind it. Available for all elements. Choose a mode from the dropdown; see Blendmode.
• Cursor movement: moves the element along with the viewer's cursor. Available for all elements. Settings: Horizontal and Vertical, each from -100 to 100. See Cursor movement on desktop and touch devices.
• Parallax: moves the element up or down while the viewer scrolls, at a different speed than the rest of the page. Available for all elements. Settings: Acceleration (-1 to 1) sets the speed and direction of the movement, and Damping (None, Slow, Normal or Fast) sets how smoothly it follows the scroll.
• Backdrop: blurs whatever is behind the element. Available for all elements. The slider sets the blur strength from 0 to 100 px. The blur is only visible where the element is transparent or semi-transparent.

Cursor movement on desktop and touch devices

The Cursor movement effect moves an element as the viewer moves the mouse. The element moves based on where the cursor is compared with the center of the scene: the further the cursor is from the center, the further the element moves.

You set the movement with two values, Horizontal and Vertical, each from -100 to 100:

• The higher the number, the greater the movement.
• A negative value moves the element in the opposite direction.
• At 0, the element doesn't move along that axis.

Giving several elements different values makes them move at different speeds, which creates a sense of depth.

On touch devices without a mouse, the element reacts to tilting the device instead, if the browser gives the page access to the motion sensor.

Changing effects for mobile

Element effects you set in the desktop layout also apply in the mobile layout. In the mobile layout, you can change them for mobile only, without changing the desktop version.

1. Click Mobile in the left panel to switch the editor to the mobile layout.
2. Select the element on the canvas.
3. In the right panel, open the Element tab and click the Effects icon (the lightning bolt).
4. In the Effect tab, do one of the following:
5. • Change an effect's settings to use different values on mobile.
   • Click - next to an effect to remove it on mobile only.
   • Click + next to an effect to add it on mobile only.

To undo a mobile-only change, click the reset icon ("Remove overwrite") next to the changed setting. If you added or removed the effect on mobile only, click the reset icon next to the effect's name instead. The effect then follows the desktop version again. The Underline effect has no reset icons.

The Hover effect tab is disabled in the mobile layout.

Frequently asked questions

Why can't I add effects to a chart or form?

Element effects aren't available for charts, forms, masks or the scene itself. When one of these is selected, the Effects icon in the Element tab is disabled. The Effects icon is also disabled while several elements are selected at once; select a single element to add effects.

Why don't I see Inner Shadow, Text shadow or Underline?

These effects are only listed for certain element types. Inner Shadow is available for buttons and shapes. Text shadow and Underline are available for text, heading, button and table elements. Select an element of the right type to see them in the Effect tab.

Why is the Hover effect tab greyed out?

The Hover effect tab is disabled in the mobile layout. Click Desktop in the left panel to switch back to the desktop layout and add or change hover effects. Effects in the Effect tab can still be changed in the mobile layout.

Updated on: 20/10/2026