Opacity

How to apply and adjust the opacity of parts.

Opacity is a property that describes the degree to which a part is transparent.

Adjusting the opacity of parts is a great way to make your app more aesthetically pleasing. Making parts such as buttons and images slightly more transparent by reducing their opacity can be the difference between a stunning app and a mediocre one.

How To Apply Opacity

What Parts Can I Apply Opacity To?

Any part that uses the color property can have an opacity applied to that color. This can include backgrounds, rows, columns, text, avatars, icons, cards, and more. Images can also have an opacity applied to them.

How To Use the Opacity Property

Any part that allows opacity to be used will have the Decoration editor visible in the right menu once the part has been selected. Opacity is applied using a slider, with values ranging from 0 to 1.

An opacity value of 0.1 means the color is almost completely transparent, and it is barely visible. An opacity value of 1 means the color is completely opaque.

Select the part you want to apply the opacity to. Go to the Decoration editor in the right menu, and go to 'Opacity'. You’ll see a sliding scale from 0 to 1, increasing in increments of 0.1.

Adjust the slider until you reach the desired opacity. You can reset the opacity back to its original by clicking 'Default'.

Applying Opacity

Here's a closer look at the Decoration Editors for both a button and an image. You'll notice that they are slightly different:

Decoration Editor for Button

Decoration Editor for Image

The Decoration Editor for the button can apply only an opacity to the button. The Decoration Editor for the image can apply opacity to both the image, using the image opacity tab, and separately to anything that might be housed within the image, using the opacity tab.

In the example below, we have an image with text and a badge on top of it appearing on the bottom, left side. When the image opacity is adjusted, the text and the badge remain as is. This is important when you want to have a background image and need to see any parts on top.

Applying Image Opacity

Adjusting the Opacity of a Color in the Color Mixer

Opacity can also be adjusted using the color mixer.

Select the part you want to apply the opacity to. Select the color property from the right menu. Once you have set a color, click the color tab and slide the opacity slider left and right until you are happy with the result. You can also use the arrows on the "A" setting of RGBA.

Here is an example:

Adjusting Opacity of Color in the Color Mixer

Related Information

Colors

Images