# Effects

# Opacity

The Opacity property lets you specify the amount of opacity or transparency to apply to an element.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Find the Opacity property
Enter the desired opacity value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Find the Opacity property
Click on Reset

# Mix Blend Mode

The Mix Blend Mode property defines how the block should blend with the background.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Find the Mix Blend Mode property
Select the desired value from the dropdown

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Find the Opacity property
Select the Normal value from the dropdown

# Transitions

Transitions are used to control the animation speed of CSS elements that change so that no abrupt movements disturb the visiting user.

# Transition Duration

The Transition Duration property defines how long the transition lasts.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Transitions icon
Find the Duration property
Enter the desired transition duration value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Transitions icon
Find the Duration property
Click on Reset

# Transition Delay

The Transition Delay property defines how long the transition will be paused before starting.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Transitions icon
Find the Delay property
Enter the desired transition delay value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Transitions icon
Find the Delay property
Click on Reset

# Transition Property

The Transition Property property defines which properties will be affected by the transition.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Transitions icon
Find the Property property
Enter the desired transition property value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Transitions icon
Find the Property property
Click on Reset

# Transition Timing

The Transition Timing property allows you to specify how quickly the transition progresses during its execution.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Transitions icon
Find the Timing property
Select the desired option from the dropdown

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Transitions icon
Find the Timing property
Select None from the dropdown

# Animation

# Animation Duration

The Animation Duration property defines how long the animation lasts.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Duration property
Enter the desired animation duration value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Duration property
Click on Reset

# Animation Delay

The Animation Delay property defines how long the transition will be paused before starting. The animation is only delayed on its first iteration.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Delay property
Enter the desired animation delay value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Delay property
Click on Reset

# Animation Name

The Animation Delay property defines which animation keyframes to use.

The Animation keyframes have to be defined in Custom CSS.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Name property
Enter the desired animation name

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Name property
Click on the Name label and Click on Reset

# Animation Iteration

The Animation Iteration property defines how many times the animation is played.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Iteration property
Enter the desired animation iteration value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Iteration property
Click on the Iteration label and Click on Reset

# Animation Timing

The Animation Timing property allows you to specify how quickly the animation progresses during its execution.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Timing property
Select the desired option from the dropdown

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Timing property
Select None from the dropdown

# Animation Direction

The Animation Direction property defines which direction the animation is played.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Direction property
Select the desired option from the dropdown

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Direction property
Select Inherit from the dropdown

Normal Starts playing the animation at the beginning. The animation is played forwards. If there is an animation loop, all properties are reset.

Reverse Starts playing the animation at the end. The animation is played backwards. If there is an animation loop, all properties are reset to the end properties.

Alternate Starts playing the animation at the beginning. If there is an animation loop, the properties are not reset.

Alternate-reverse Starts playing the animation at the end. If there is an animation loop, the animation is played in reverse.

# Animation Fill Mode

The Animation Fill Mode property allows you to specify at what point in the animation the effects are visible (before or after). The fill mode allows you to tell the browser if the animation's styles should also be applied outside of the animation.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Fill Mode property
Select the desired option from the dropdown

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Animation icon
Find the Fill Mode property
Select Inherit from the dropdown

None None of the animations effects apply to the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.

Forwards The last styles from the end of the animation are kept on the element afterwards.

Backwards The styles of the animation will be applied to the element before the animation starts.

Both The styles are applied to the element before and after the animation plays.

# Filters

# Blur

The Blur property defines the amount of Gaussian blur to apply to an element.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Blur property
Enter the desired blur value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Blur property
Click on Reset

# Brightness

The Brightness property defines the amount of color brightness to apply to an element.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Brightness property
Enter the desired brightness value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Brightness property
Click on Reset

# Contrast

The Contrast property defines the amount of color contrast effect to apply to an element.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Contrast property
Enter the desired contrast value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Contrast property
Click on Reset

# Grayscale

The Grayscale property defines the amount of grayscale effect to apply to an element.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Grayscale property
Enter the desired grayscale value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Grayscale property
Click on Reset

# Hue-Rotate

The Hue Rotate property takes the color wheel and spins it the number of degrees you specify, changing every color accordingly.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Hue Rotate property
Enter the desired hue rotate value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Hue Rotate property
Click on Reset

# Invert

The Invert property reverses the colors of the element.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Invert property
Enter the desired invert value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Invert property
Click on Reset

# Saturate

The Saturate property defines the intensity of the color. The higher the percentage, the more vivid the color.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Saturate property
Enter the desired saturate value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Saturate property
Click on Reset

# Sepia

The Sepia property defines the amount of sepia color to apply to an element

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Sepia property
Enter the desired sepia value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Filters icon
Find the Sepia property
Click on Reset

# Text Shadow

# Text Shadow color

The Text Shadow Color property defines the color of the drop shadow of the text. If omitted, the color of the element is used.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Text Shadow icon
Find the Color property
Open the color picker by clicking on the color circle in the Text Color property
Select your color in the color picker or click on a global color

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Text Shadow icon
Find the Color property
Click on the Clear button in the Colorproperty

# Text Shadow Horizontal Offset

The Horizontal Offset property defines the horizontal offset of the drop shadow of the text.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Text Shadow icon
Find the H. Offset property
Enter the desired horizontal offset value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Text Shadow icon
Find the H. Offset property
Click on Reset

# Text Shadow Blur

The Text Shadow Blur property specifies the blur radius of the drop shadow.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Text Shadow icon
Find the Blur property
Enter the desired blur value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Click on the Text Shadow icon
Find the Blur property
Click on Reset

# Tilter

The Tilter effect uses the mouse coordinates to create a 3D perspective hover effect.

# Active

The Active property activates the Tilter effect.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Active property
Toggle the property

# Reverse

The Reverse property reverses the Tilter effect.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Reverse property
Toggle the property

# Transition

The Transition property sets a transition on enter/exit.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Transition property
Toggle the property

# Reset

The Reset property resets the tilt effect on enter/exit.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Reset property
Toggle the property

# Glare

The Glare property adds a glare effect to the element depending on the mouse position.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Glare property
Toggle the property

# Max Tilt Rotation

The Max Tilt Rotation property limits the degree of tilt rotation.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Max Tilt Rotation property
Toggle the property

# Start X

The Start X property sets the starting tilt on the X axis, in degrees.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Start X property
Toggle the property

# Start Y

The Start Y property sets the starting tilt on the Y axis, in degrees.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Start Y property
Toggle the property

# Perspective

The Perspective property transforms the perspective, the lower the more extreme the tilt gets.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Perspective property
Toggle the property

# Scale

The Scale property sets the scale, 2 = 200%, 1.5 = 150%, etc..

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Scale property
Toggle the property

# Speed

The Speed property sets the speed of the enter/exit transition

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Effects panel
Open the Tilter panel
Find the Speed property
Toggle the property

effects design style