Impacts

Within this instructional session, you’ll gain knowledge on:

1. Mixing
2. Translucence
3. Border
4. Shadowed boxes
5. 2D & 3D conversions
6. Changes
7. Absorbers
8. Backdrop sieves
9. Pointer
10. Occurrences

Insider hint: You can implement most of these influences during the hovering phase or any other phase in the settings menu. Delve deeper into configuring impacts on varying phases.

Mixing

Mixing methods in Webflow present a range of distinct approaches for an entity to blend with (or overlap) other underlying elements — all without the need for custom code. Webflow manages the mix-blend mode CSS feature for you, granting the ability to define how an entity’s content should mix with the content of its parent and the background of the entity. Mixing modes unveil a plethora of inventive possibilities to surpass mere transparency adjustments for elements.

There are 16 mixing modes. Modes that function similarly are grouped close together in the mixer dropdown. These mode groupings consist of:

• Typical mode (Ordinary)
• Dimming modes (Dim, Multiply, and Color scald)
• Brightening modes (Brighten, Screen, and Color dodge)
• Stark modes (Overlay, Soft light, and Hard light)
• Relative modes (Difference and Exclusion)
• Unified modes (Hue, Saturation, Color, and Luminosity)

To view samples of each mixing mode and delve further into their application, explore our mixing mode tutorial.

Translucence

To modify the see-through level for an entity and its offspring, alter the translucence within the impact settings. You can adjust the translucence by entering a value in the input area or by moving the translucence slider to your preferred setting.

Translucence values are defined in percentages. 100% denotes opaqueness, and 0 signifies complete transparency.

Border

Borders are intended to aid your website visitors in navigating through your design as they navigate through your interactive components with their keyboard. The border surrounding an entity makes it evident to your visitor which element they’re interacting with — their attention is focused on — one specific element. On pressing Tab again on their keyboard, the border appears around the next newly focused element.

Due to this, it’s crucial to add a border to the Centered (keyboard) state or the Centered state of your component.

You have control over the following attributes in the Border settings:

• Design —specifies the type of border (e.g., solid, dashed, or dotted) encompassing an element
• Width — specifies the thickness of the border. This figure can adopt any CSS unit from the set available in the unit dropdown
• Margin — specifies the space between a border and the edge or border of an element. This figure can adopt any CSS unit from the set available in the unit dropdown
• Color — specifies the color of the border

Further insights into input values and units can be explored.

Crucial: Although choosing “None” for the Border style may seem appealing if you wish to eradicate it and revert to default browser configurations, bear in mind that this action won’t clear any other established properties (e.g., width, margin, or color), and will lead to the complete disappearance of your border, resulting in inaccessibility and a diminished user experience.

Dive into our guide on borders.

Shadowed boxes

Shadowed boxes include adornment outside or within an element’s rectangular boundary. They can be employed to channel attention or depth to buttons, segments, div blocks, or any other element on your site.

You can apply a shadowed box or form multiple shadows to layer outside of an element by navigating to Design panel > Effects > Shadowed boxes.

You can personalize the type, horizontal distance, vertical distance, blur, spread, and color of the shadow.

Stacking

You can include multiple layers for most impacts in the Design panel. For instance, you can append and layer multiple shadows to an element.

In the impact settings, you can toggle the visibility of each layer by opting for the “eye” icon and remove each layer by selecting the “trash” icon. If you wish to modify the sequence of each impact, merely select the layer you intend to reorder and drag it to your desired numbering.

You have authority over the following attributes in the shadowed box settings:

• Kind — applies the shadow inside or outside of the element’s boundaries
• Horizontal —horizontal distance of the shadow
• Vertical —vertical distance of the shadow
• Blur — impacts the clarity of the shadow blur
• Spread —designates the extension of the shadow relative to the boundaries of the element it’s on
• Color —alters the color and opacity of the shadow

Gain deeper insight into input values and units.

Crucial: Animated blurs experience slowdown and are not recommended.

2D & 3D alterations

You can incorporate alterations from the Design panel > Impacts > 2D & 3D alterations to manipulate an element’s appearance and location across distinct phases, such as hovering.

Four categories of alterations exist:

1. Shift
2. Resize
3. Revolve
4. Lean

Tap the ellipsis adjacent to 2D & 3D alterations to reach the Alteration settings and fine-tune transformation origin, backface visibility, self-perspective, and offspring perspective.

Similar to stacking impacts, you can introduce multiple types of alterations without forfeiting any preceding settings. Click the “plus” icon to append an additional transformation.  

Further insights into alterations can be explored.

Changes

Modifications generate a smooth animation between diverse states of an element. A duration and easing type can be tailored to generate a distinct alteration. One common use of modifications is for hover states on elements to guarantee they don’t undergo abrupt shifts upon hover.

By default, modifications are set to none, indicating they’ll automatically apply to all states. A modification should be included for every property/style established across any state.

To concoct a modification, navigate to Design panel > Impacts > Changes, tap the “plus” icon, and specify the following attributes:

• Type — the property type influenced by the modification
• Duration — stipulates the duration of the modification in milliseconds (ms). You can tweak the preset duration (200ms) using the slider or by inputting the duration value in the input zone
• Easing —determines the pace or speed of the modification. You can insert a value or activate the easing editor to preview presets or devise unique easing impacts

Sieves

Sieves apply an exclusive visual impact to an element. They can also trigger alterations on hover states. You can incorporate sieves on an image, background video, or any other element. Sieves alter the appearance of the entire element, encompassing its offspring.

To integrate a sieve, visit Design panel > Impacts > Sieves, tap the “plus” icon, and opt for any of the sieve effects from the dropdown menu: 

• Blurring —blurs the content of an element. An increased blur radius value will amplify the blur level. 0 will not produce an effect.
• Lightening—denotes the brightness level ranging from 0 to 200%. A value of 100% will revert the element to its initial brightness.
• Contrast —indicates the contrast level between 0 and 200%. A value of 100% will reset the contrast to its original state.
• Hue shift —adjusts the colors/hue of an image or element. The value is measured in degrees. A value of 0 or 360 restores the original hue. You can modify the hue by interacting with the dot on the directional dial, clicking anywhere on the dial to set the angle, using the arrows to rotate in 45-degree increments clockwise or counterclockwise, or entering the desired angle in the input field.
• Color saturation —determines the color intensity from 0% to 200%. A value of 100% will return it to the original saturation.
• Grayscale —converts all colors to grayscale. 0% presents the original image, while 100% makes it completely grayscale.
• Invert —reverses all colors in the element. A value of 0% displays the original image, and 100% fully inverts the colors.
• Sepia —applies a vintage yellowish appearance to an image or element. 0% represents the original image, and 100% is entirely sepia-toned.