Opacity

Opacity

InfoNotesIn a nutshell
The Opacity property controls how transparent an element's content is. While the value of 100% makes the element fully visible, lower values fade it progressively until it becomes completely invisible at 0%.

1. Description

Opacity sets the overall transparency level of an element*link to elements page*, affecting everything it renders such as the background color, background image, border, shadow, and any text, icon, or image content within it. While the element remains on the page and occupies its full space, its visual presence is reduced proportionally.


2. Possible values

Opacity accepts a numeric value as a percentage anywhere from 0 to 100%. While smaller values are ideal for subtle watermarks, nearly invisible overlays, or transition end states, larger values cater to all standard visible elements.

NotesNote: 0% makes the element fully transparent and the maximum of 100% makes it fully opaque.

3. Visual reference

   

 
                      

4. How to set opacity?

  1. Select an element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
  2. Click to open the Opacity accordion within the pane.
  3. Enter a value between 0 and 100 in the opacity input field.
  4. Click Save in the top right corner to ensure the changes are retained.

5. Applicable elements

Opacity is available on the primitives and composite elements listed below. Apart from this, it is also listed as a style property in all presets.

  1. Text
  2. Image
  3. Icon
  4. Canvas
  5. H-Stack
  6. V-Stack
  7. Menu
  8. Button
  9. Portal Forms
  10. Embed

6. Points to note

  1. Opacity affects the entire element - All visual aspects of the element such as background, border, shadow, text, icons, and images are faded together. If you only want to make the background transparent, use No Fill in Background*link to Background doc*.
  2. Opacity and Shadow relationship - When Opacity value is reduced more, the Shadow*link to Shadow doc* of the element also fades along with the rest of the element. That is, shadow on a low-opacity element will appear proportionally faint.

Explore other properties

  1. Alignment
  2. Layout
  3. Padding
  4. Margin
  5. Font
  6. Background
  7. Corner Radius
  8. Border
  9. Shadow
  10. Image and icon styling
  11. Tab styling
  12. Stack