All Collections
Can I change the opacity of elements?
Can I change the opacity of elements?
Changing the opacity of elements can be useful for drawing attention to elements, or letting them fade into the background.
Written by Edward Savoy
Updated over a week ago

Getting started with changing the opacity of elements is super simple, step one is to drag the element of choice onto the page. Changing the opacity of elements can be great for drawing attention to certain elements while letting other elements fade into the background.

The video above is a great demonstration of how to use this feature with the Button element inside of the Image element, with the opacity of the Image element reduced to draw attention to the Button element. The opacity setting currently ranges from 0 - 1 with 0 being transparent, and 1 being opaque.

Changing the overlay opacity of a Container element

The settings of the Container element differ slightly from the Image element, this element has an overlay that you can apply to the element in order to customize the look of the element. The opacity of this overlay defaults to 0 so that is it transparent, but you can change this if you need. 

Changing the opacity using the color selector

Some elements have methods of changing the color of certain elements of their appearance using the color selector, you can also use this to change the opacity of an element. The example below shows a user changing the transparency of the pane background color of an Accordion element, this can also be used for the Border color, Heading background color, and Heading text color.

Did this answer your question?