Set opacity of an element

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Set opacity of an element

Changing the opacity of an element affects the transparency level of this element and all its children.

Learn more about opacity and other effects.

Opacity can also be changed for a color of a specific style property, like a background color or border color. This is useful if you want to apply transparency to a specific style property without affecting its children elements.

Setting hover effects

You can use the opacity property to create hover effects:

  1. Select hover from the states menu
  2. Set an opacity value in the Effects section of the Styles panel.
  3. Go back to the none state
  4. Add a transition to smooth out the effect

Learn more about applying states and transitions on elements.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form