Opacity
In a nutshellThe 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, affecting everything it renders such as the background color, background image, border, shadow, and any content within it. While the element remains on the portal 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.
Note: 0% makes the element fully transparent and the maximum of 100% makes it fully opaque.3. Visual reference
4. How to set opacity?
- Select an element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
- Click to open the Opacity accordion within the pane.
- Enter a value between 0 and 100 in the opacity input field.
- 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.
6. Points to note
- 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.
- Opacity and Shadow relationship - When Opacity value is reduced more, the Shadow of the element also fades along with the rest of the element. That is, shadow on a low-opacity element will appear proportionally faint.