Effects

Apply effects such as filters, opacity, transforms to elements to enhance interactivity.

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!

In the Style panel, you can add effects to elements that enhance interactivity. These effects include:

  • Opacity
  • Box shadows
  • Transforms
  • Transitions
  • Filters
  • Cursors

You can add most of these effects on the hover state or any other state in the states menu.

Learn more about how to set effects on different states.

Stacking effects

You can add multiple layers for most effects in the Style panel. For example, you can add and layer multiple box shadows to an element.

In the effect settings, you can toggle the visibility of each layer by selecting the eye icon and delete each layer by selecting the trash icon. To change the order of each effect, simply select the layer you’d like to reorder and drag it to your desired order number.

Opacity

To customize the transparency level for an element and its children, change the opacity in the effects settings. You can change the opacity by entering a value in the input field or by dragging the opacity slider to your desired value.

Opacity values are set in percentages. 100% is opaque and 0 is completely transparent.

Box shadows

Box shadows add styling outside or inside of an element’s rectangular boundary. Box shadows can be used to add focus or depth to buttons, sections, div blocks, or any other element in your project.

You can add a box shadow, or create multiple box shadows to layer outside of an element, in the box shadow settings of the Style panel.

Select the box shadow to customize the type, angle, distance, blur, size, and color of the shadow.

You have the following controls in the box shadow settings:
  • Type: applies the shadow inside or outside of the element’s boundaries.
  • Angle: changes the direction of the box shadow. Adjust the angle by clicking and dragging the dial, clicking anywhere on the dial to set that position, clicking the arrows to rotate the angle, or entering the angle value in the input field.
  • Distance: moves the shadow closer or farther in the direction specified by the set angle.
  • Blur: affects how focused the shadow blur is.
  • Size: specifies the spread of the shadow relative to the boundaries of the element it’s on.
  • Color: changes the color and opacity of the shadow.

Learn more about input values and units.

Transforms

You can add transforms in the effect settings to manipulate an element's appearance and position on different states, such as hover.

There are four types of transforms:

  1. Translate
  2. Scale
  3. Rotate
  4. Skew.

In the transform settings, you can control settings such as transform origin, backface visibility, self-perspective, and children perspective.

Learn more about transforms.

Transitions

Transitions create a smooth animation between different states of an element. A duration and easing type effect can be customized to create a unique transition. A common use of transitions is for hover states on elements so that they don’t abruptly change on hover.

By default, transitions are set to none, meaning that they’ll apply to all states automatically. You should add a transition for each property/style that you have added in any state.

Add a transition element and specify the following properties:

  • Type: the type of property affected by the transition.
  • Duration: specifies the duration of the transition in milliseconds (ms.) You can change the duration, set to 200ms by default, by using the slider or entering the duration value into the input field.
  • Easing: gives you the option to type in a value or open the easing editor, which allows you to browse presets or create unique easing effects.

Filters

Filters apply a unique visual affect to an element. Filters can also be used to create changes on hover states. You can add filters on an image, background video or any other element. Filters change the appearance of the entire element, including its children.

To add a filter, use the add menu and choose any of the filter effects in the dropdown:

  • Blur: blurs the content of an element. A larger blur radius value will increase the blur level. 0 will have no effect.
  • Brightness: specifies the amount of brightness between 0 and 200%. A value of 100% will return the element back to its original brightness.
  • Contrast: specifies the amount of contrast between 0 and 200%. A value of 100% will return the element back to its original contrast.
  • Hue rotate: shifts the colors/hue of an image or element. The value unit is in degrees. A value of 0 or 360 brings it back to the original hue. You can change the hue in one of the following ways: clicking and dragging the dot on the direction dial, clicking anywhere on the dial to set that position as the direction of the angle, clicking the arrows to rotate the angle in increments of 45 degrees clockwise or anticlockwise, or typing in the desired angle in the input field.
  • Saturation: defines the intensity of the colors. Value can be between 0% and 200%. A value of 100% will bring it back to the original saturation.
  • Grayscale: converts all colors to grayscale. 0% will show the original image and 100% will make the image completely grayscale.
  • Invert: inverts all the colors in the element. A value of 0% will show the original image and 100% will completely invert the colors.
  • Sepia: gives your image a vintage off-yellow look. 0% represents the original image and 100% is fully sepia.

Any filters you add or adjust will be previewed on the canvas. You can also add multiple filters to a single element and toggle their visibility and order in the filter settings.

Cursors

Using the right cursor is important to indicate to users what's going to happen as they navigate a page. Using a cursor that doesn’t match the result can lead to confusion or inaction.

The default cursor value is auto. It will render the default cursor for specific element types, as specified by the browser’s default settings. For example, hovering over links will show a pointer cursor, and hovering over text will show a text cursor.

In most cases, it’s best to keep this default setting and allow the browser to pick the right cursor. That said, you can override the browser’s default cursor for an element by changing the cursor value in the Style panel.

You can test and see how your cursor will change when you hover over your styled element in preview mode.

Want to create your own playful, custom cursors? Check out A guide to custom cursors in Webflow.

Browser support

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