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


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 opacity

Webflow opacity

You can set the opacity of any element under the Effects section of the Styles Panel. To set the value click and drag the slider or type in a value. Opacity values are set in percentages—100% is opaque and 0 is completely transparent. Any value in between is see-through.


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
  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.