How do I change an element's opacity in Webflow?

Set the percent in Effects

Select the element. Open Style panel, Effects, and find Opacity. Type a value in the field, or drag the slider.

Opacity is a percentage of transparency for that element and its children. 100% is opaque. 0 is completely transparent. A card at 40% fades the card and everything inside it as one object.

Example: a decorative photo in a hero should sit behind the headline, fainter than the words. Select the photo, not the section, and lower the opacity. If the headline is a sibling in the Navigator, it stays at its own opacity. If the headline is inside the photo's wrapper, it fades too.

The canvas shows the change while you drag. The live site shows it after you publish.

Do not confuse this with a color's opacity

The color picker has its own opacity slider. That slider sets the transparency of one color: a font, a background, a border, or an overlay. At 100% the color is fully opaque. Any value below that makes the color see-through. Webflow notes this is useful for a color overlay on an image, or for a see-through background.

The text color guide is that color control on type. Effects opacity is the whole element. Use the color slider when a black overlay should be partly clear and the photo element itself should stay fully opaque. The background image guide is how a background image, a color, and an overlay stack.

If you lowered a color and the photo still looks solid, you changed the color, not the element. Select the image and check Effects. If the whole card faded and you only wanted a lighter fill, set Effects opacity back to 100% and change the background color's opacity instead.

You can also type an alpha, or A, value in the color picker, from 0 to 100%. That alpha is the color's transparency. It is the same idea as the color opacity slider. It is still not Effects opacity.

Fading is not the same as hiding

0 makes the element completely transparent. Hiding it is a different control. To keep an element off a breakpoint without deleting it, use Style panel, Layout, and set Display to none. The hide guide is that setting, including how a display value cascades to smaller widths.

Use Effects opacity when the element should remain in the design, only fainter. Use display none when it should not appear on that breakpoint. Deleting the element removes it on every breakpoint, so neither opacity nor display none is a delete.

Clicks are a third control in the same Effects section. Pointer events default to auto, which allows ordinary click and touch. Set Events to none when that element should not receive clicks or touches. That switch is separate from the opacity percent. Do not assume a faint element has stopped receiving clicks just because it is hard to see.

Fade on hover without leaving the state on

You can add most effects, including opacity, on the hover state or another state from the states menu. Select the element, choose Hover, and set the opacity you want while the pointer is over it. Then choose None so you are not still editing the hover styles. The hover guide is that menu.

If the fade should ease instead of snap, add a transition for the opacity property. Open Style panel, Effects, Transitions, and click the plus icon. Set the type to the property you changed. Duration is in milliseconds. The default duration is 200 milliseconds, and you can change it in the field or with the slider. Easing sets the rate of the change. Add one transition for each property you changed on Hover, so the move between states is not abrupt. Animated blurs are a separate warning: they are very slow and are not recommended. An opacity transition is not a blur.

Check the children and the class, then publish

Because children share the parent's opacity, a button inside a faded card becomes fainter too. If the button must stay solid, move it outside the faded element, or fade a decorative layer that does not wrap the button.

Opacity on a class hits every element that uses the class. A class named Soft photo can fade the decorative images. Do not put the value on a class that also styles the logo or the main product shot.

Publish the domain you want to check. On the live page, confirm the intended element is the faint one, the words you need are still readable against what is behind them, and a hover fade returns when the pointer leaves. If the words are hard to read, raise the opacity or move the text out of the faded parent. The color picker can show a contrast ratio for text against its background. Use that when the text and the background are solid colors. Then look at the real page, because a photo behind the words is not the same as a flat color.

Changing opacity on an element you already have is ordinary visual work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.