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.
   
   

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.

• Related Articles

• How to apply colors and gradients to elements

  Use the color settings in an element’s toolbar to apply solid colors or gradients. Depending on the selected element, you can customize properties such as its background, text, icon, border, or connector color. Before you start Make sure you have ...

• How to use Text and Link elements

  Use Text and Link elements to add headings, descriptions, labels, and clickable text to your designs. Before you start Make sure you have permission to edit the board and are in design editing mode. Text element types Visily provides the following ...

• How to use Table elements

  Use Table elements to organize information into rows and columns. You can create a blank table, import existing data, paste content from a spreadsheet, or generate sample data with AI. Before you start Make sure you have permission to edit the board ...

• How to use Image elements

  Use Image elements to add uploaded images, stock photos, AI-generated visuals, or placeholders to your designs. Before you start Make sure you have permission to edit the board. The availability of workspace images and some AI features may depend on ...

• How to copy and paste styles between elements

  Use Copy and paste styles to quickly apply the visual appearance of one element to another without recreating each style setting manually. This helps you maintain consistent colors, text formatting, borders, shadows, and other visual properties ...