CSS effects

CSS effects

Use CSS effects to add visual effects to your elements or configure how they blend with overlapping elements. CSS effects can be animated and overridden in media rules.

You can find the settings for CSS effects in the CSS Effects panel when a single element is selected. If the panel isn't visible in your workspace, toggle it from the Window menu.

CSS effects can't be applied to masks.

Mix blend mode

The mix blend mode determines how an element's content blends with the element's background, based on the hue, saturation and brightness values of the element and background colours.

To apply a mix blend mode:

1. Select the element that you want to blend with its background.
2. In the CSS effects panel, use the Mix blend mode drop-down to choose a mix blend mode.

Try selecting different blend modes to preview their effect. If an element isn't blending the way that you expect, check that the selected element is in front of the other elements with which you want to blend.

List of mix blend modes

• Normal (no effect) – no blending.
• Colour – uses the hue and saturation of the element colour and the luminosity of the background colour.
• Colour burn – inverts the background colour, divides it by the element colour, then inverts the result.
• Colour dodge – divides the background colour by the inverse of the element colour.
• Darken – uses the darker colour from the element or background.
• Difference – subtracts the darker colour from the lighter colour.
• Exclusion – Acts the same as the Difference mode, but with less contrast.
• Hard light – Applies the Multiply mode if the element is darker than the background, or the Screen mode if the element is lighter.
• Hue – uses the hue of the element colour and the saturation and the luminosity of the background colour.
• Lighten – uses the lighter colour from the element or background.
• Luminosity – uses the luminosity of the element colour and the hue and saturation of the background colour.
• Multiply – multiplies the element colour by the background colour.
• Overlay – Applies the Multiply mode if the element is lighter than the background, or the Screen mode if the element is darker.
• Saturation – uses the saturation of the element colour and the hue and luminosity of the background colour.
• Screen – inverts the element and background colours, multiplies them, then inverts the result.
• Soft light – Acts the same as the Hard light mode, but with a softer effect.

Filters

Filters allow you to add visual effects to an element using CSS, such as blurring or a Drop Shadow.

In video documents and image ads, you can use the backdrop tool to apply CSS filters to the area behind an element.

Add a filter

To add a new filter:

1. Select the element to which you want to add a filter.
2. In the CSS effects panel, click Add filters.
3. Select the filter that you want to apply. The following filters are available:
   • Blur
   • Brightness
   • Contrast
   • Drop Shadow
   • Greyscale
   • Hue rotate
   • Invert
   • Opacity
   • Saturate
   • Sepia
4. Adjust the configuration options as necessary. (See below for more information.)

You can add multiple filters to an element, in which case you can reorder the filters.

List of filters

Blur

Applies a blur to the element.

Configuration options

• Radius – the radius of the blur, from 0 px to 100 px.

Brightness

Makes the element brighter or less bright.

Configuration options

• Percentage – 0% makes the element black, while 100% leaves the element unchanged. The maximum percentage is 1,000%.

Contrast

Adjusts the contrast of the element.

Configuration options

• Percentage – 0% makes the element grey, while 100% leaves the element unchanged. The maximum percentage is 1,000%.

Drop Shadow

Adds a Drop Shadow to the element.

Configuration options

• Offset x – The horizontal distance to the Drop Shadow, from -100 px to 100 px.
• Offset y – The vertical distance to the Drop Shadow, from -100 px to 100 px.
• Radius – The shadow's blur, from 0 px to 100 px.
• Colour – the shadow's colour.

Greyscale

Converts the element to Greyscale.

Configuration options

• Percentage – 0% leaves the element unchanged, while 100% makes the element completely Greyscale.

Hue rotate

Adjusts the colours of the element.

Configuration options

• Angle – the number of degrees to rotate around the colour wheel, from 0° to 360°.

Invert

Inverts the colours of the element.

Configuration options

• Percentage – 0% leaves the element unchanged, while 100% completely inverts the element's colours.

Opacity

Changes the opacity of the element.

Configuration options

• Percentage – 0% makes the element completely transparent, while 100% leaves the element unchanged.

Saturate

Saturates the element.

Configuration options

• Percentage – 0% makes the element completely un-saturated, while 100% leaves the element unchanged. The maximum percentage is 1,000%.

Sepia

Converts the element to sepia.

Configuration options

• Percentage – 0% leaves the element unchanged, while 100% makes the element completely sepia.

Reorder filters

If multiple filters apply to the same element, they are applied in the order that they appear in the CSS Effects panel.

To reorder filters:

1. Hover over the name of the filter that you want to reorder. Three dots appear.
2. Using the dots as a handle, drag and drop the filter to where you want it in the panel.

Hide a filter

You can hide a filter so that its effect won't appear on the stage, in previews, or in published files.

To hide a filter:

1. Hover over the filter name.
2. Click the Hide icon.
3. To show the filter again, click the Show icon.

The controls for hidden filters can't be edited.

Delete a filter

To delete a filter:

1. Hover over the filter name.
2. Click the Delete icon.