# Effects

# Opacity

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Find the Opacity property
  6. Enter the desired opacity value
  1. Select a block

  2. Open the block inspector

  3. Navigate to the advanced tab

  4. Open the Effects panel

  5. Find the Opacity property

  6. Click on Reset

# Mix Blend Mode

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Find the Mix Blend Mode property
  6. Select the desired value from the dropdown
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Find the Opacity property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Transitions  icon
  6. Find the Duration property
  7. Enter the desired transition duration value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Transitions  icon
  6. Find the Duration property
  7. Click on Reset

# Transition Delay

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Transitions  icon
  6. Find the Delay property
  7. Enter the desired transition delay value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Transitions  icon
  6. Find the Delay property
  7. Click on Reset

# Transition Property

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Transitions  icon
  6. Find the Property property
  7. Enter the desired transition property value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Transitions  icon
  6. Find the Property property
  7. Click on Reset

# Transition Timing

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Transitions  icon
  6. Find the Timing property
  7. Select the desired option from the dropdown
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Transitions  icon
  6. Find the Timing property
  7. Select None from the dropdown

# Animation

# Animation Duration

The Animation Duration property defines how long the animation lasts.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Duration property
  7. Enter the desired animation duration value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Duration property
  7. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Delay property
  7. Enter the desired animation delay value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Delay property
  7. Click on Reset

# Animation Name

The Animation Delay property defines which animation keyframes to use.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Name property
  7. Enter the desired animation name
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Name property
  7. Click on the Name label and Click on Reset

# Animation Iteration

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Iteration property
  7. Enter the desired animation iteration value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Iteration property
  7. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Timing property
  7. Select the desired option from the dropdown
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Timing property
  7. Select None from the dropdown

# Animation Direction

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Direction property
  7. Select the desired option from the dropdown
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Direction property
  7. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Fill Mode property
  7. Select the desired option from the dropdown
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Animation  icon
  6. Find the Fill Mode property
  7. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Blur property
  7. Enter the desired blur value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Blur property
  7. Click on Reset

# Brightness

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Brightness property
  7. Enter the desired brightness value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Brightness property
  7. Click on Reset

# Contrast

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Contrast property
  7. Enter the desired contrast value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Contrast property
  7. Click on Reset

# Grayscale

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Grayscale property
  7. Enter the desired grayscale value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Grayscale property
  7. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Hue Rotate property
  7. Enter the desired hue rotate value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Hue Rotate property
  7. Click on Reset

# Invert

The Invert property reverses the colors of the element.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Invert property
  7. Enter the desired invert value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters icon
  6. Find the Invert property
  7. Click on Reset

# Saturate

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Saturate property
  7. Enter the desired saturate value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Saturate property
  7. Click on Reset

# Sepia

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Sepia property
  7. Enter the desired sepia value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Filters  icon
  6. Find the Sepia property
  7. 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.

  1. Select a block

  2. Open the block inspector

  3. Navigate to the advanced tab

  4. Open the Effects panel

  5. Click on the Text Shadow  icon

  6. Find the Color property

  7. Open the color picker by clicking on the color circle in the Text Color property

  8. Select your color in the color picker or click on a global color

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Text Shadow  icon
  6. Find the Color property
  7. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Text Shadow  icon
  6. Find the H. Offset property
  7. Enter the desired horizontal offset value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Text Shadow  icon
  6. Find the H. Offset property
  7. Click on Reset

# Text Shadow Blur

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Text Shadow  icon
  6. Find the Blur property
  7. Enter the desired blur value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Click on the Text Shadow  icon
  6. Find the Blur property
  7. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Active property
  7. Toggle the property

# Reverse

The Reverse property reverses the Tilter effect.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Reverse property
  7. Toggle the property

# Transition

The Transition property sets a transition on enter/exit.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Transition property
  7. Toggle the property

# Reset

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Reset property
  7. Toggle the property

# Glare

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Glare property
  7. Toggle the property

# Max Tilt Rotation

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Max Tilt Rotation property
  7. Toggle the property

# Start X

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Start X property
  7. Toggle the property

# Start Y

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Start Y property
  7. Toggle the property

# Perspective

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Perspective property
  7. Toggle the property

# Scale

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Scale property
  7. Toggle the property

# Speed

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

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Effects panel
  5. Open the Tilter panel
  6. Find the Speed property
  7. Toggle the property