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

1. Make sure you have permission to edit the board and are in Hi-fi design mode.
   
2. The settings below are available by selecting an element and opening the relevant color option from its toolbar.
3. The available color settings may vary depending on the selected element and property.

Apply a solid color

Open the Solid tab to apply one consistent color to the selected property. The available options include:

1. Suggested colors: Choose from colors recommended based on the current board theme.
   
   
   
2. Custom color: Select More colors to open the full color picker. You can choose a color visually, enter a HEX or RGB value, or use the Eyedropper to select a color from the canvas.
   
   
   
3. Theme colors: Choose from the colors configured in the board theme. Each theme color includes a range of shades, from lighter to darker options. To change the colors available in the theme palette, see How to set up colors in Theme Settings.
   
   
   
4. Color opacity: Adjust the transparency of the selected color.
   
   

Color opacity controls the transparency of the selected color property without changing the rest of the element. Layer opacity affects the entire element, including its background, text, border, shadow, and other contents.

Apply a gradient

Open the Gradient tab to blend multiple colors across the selected element or property. The available options include:

1. Suggested gradients: Choose from ready-made gradients recommended for your design.
   
   
   
2. Custom gradient: Create and customize a gradient using the following settings:
1. Gradient type: Choose between a linear or radial gradient.
2. Direction: Control the direction in which the colors blend.
3. Color stops: Add, remove, reposition, or change the colors within the gradient.
   
   

The Gradient tab is available only for elements and color properties that support gradients.

Need more help?

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

• Related Articles

• 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 Make sure you have permission to edit the board ...

• How to set up colors in theme settings

  Set up colors in theme settings to control the main color palette used across your board. Theme colors help keep your UI components, templates, and canvas designs visually consistent. Before you start Make sure you have permission to edit the board. ...

• Wireframe Elements in Visily

  Visily provides a wide range of ready-to-use elements for building app and website wireframes. These elements help you create consistent interfaces quickly without designing every component from scratch. Before you start Make sure you have permission ...

• 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 ...

• 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 ...