How to apply blur effects to elements

How to apply blur effects to elements

Use blur effects to soften an element or blur the content behind it. Blur can be applied to containers, shapes, images, and supported Smart Components such as buttons and input fields. 

Before you start

  1. Make sure you have permission to edit the board and are in Hi-fi design mode.

Blur options in Visily

Visily provides two types of blur effects:
  1. Blur: Softens the selected element itself.


  2. Background blur: Softens the content behind the selected element while keeping the element visible.

Blur a selected element

The Blur effect softens the entire selected element, including its content and visual details. To apply it:
  1. Select the element.
  2. Open Edit blur from its toolbar, then choose Blur.


  3. Select a blur preset or enter a custom intensity. Higher values create a stronger blur effect.

Blur the background

Background blur keeps the selected element visible while blurring the content underneath it. This is useful for overlays, panels, dialogs, and translucent interface elements. To apply it:
  1. Select the element.
  2. Open Edit blur from its toolbar, then choose Background blur.


  3. Choose a background blur preset or enter a custom intensity. The available settings include:
    1. Blur intensity: Set the strength of the background blur.
    2. Color opacity: Adjust the transparency of the selected element’s color. Lower opacity makes the blurred content behind the element more visible.

Notes
Background blur is visible only when there is content behind the selected element.

Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.