CSS effects

CSS Effects - Google Web Designer

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 colors.

To apply a mix blend mode:

1. Select the element you want to blend with its background.
2. In the CSS Effects panel, use the Mix blend mode dropdown to choose a mix blend mode.

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

List of mix blend modes

• Normal (no-effect) - No blending.
• Color - Uses the hue and saturation of the element color and the luminosity of the background color.
• Color burn - Inverts the background color, divides it by the element color, then inverts the result.
• Color dodge - Divides the background color by the inverse of the element color.
• Darken - Uses the darker color from the element or background.
• Difference - Subtracts the darker color from the lighter color.
• 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 color and the saturation and the luminosity of the background color.
• Lighten - Uses the lighter color from the element or background.
• Luminosity - Uses the luminosity of the element color and the hue and saturation of the background color.
• Multiply - Multiplies the element color by the background color.
• 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 color and the hue and luminosity of the background color.
• Screen - Inverts the element and background colors, multiplies them, then inverts the result.
• Soft light - Acts the same as the Hard light mode, but with a softer effect.

Filters

Filters let you 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 you want to add a filter to.
2. In the CSS Effects panel, click Add filters.
3. Select the filter you want to apply. The following filters are available:
   • Blur
   • Brightness
   • Contrast
   • Drop shadow
   • Grayscale
   • 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 0px to 100px.

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 1000%.

Contrast

Adjusts the contrast of the element.

Configuration options

• Percentage - 0% makes the element gray, while 100% leaves the element unchanged. The maximum percentage is 1000%.

Drop shadow

Adds a drop shadow to the element.

Configuration options

• Offset x - The horizontal distance to the drop shadow, from -100px to 100px.
• Offset y - The vertical distance to the drop shadow, from -100px to 100px.
• Radius - The shadow's blur, from 0px to 100px.
• Color - The shadow's color.

Grayscale

Converts the element to grayscale.

Configuration options

• Percentage - 0% leaves the element unchanged, while 100% makes the element completely grayscale.

Hue rotate

Adjusts the colors of the element.

Configuration options

• Angle - The number of degrees to rotate around the color wheel, from 0° to 360°.

Invert

Inverts the colors of the element.

Configuration options

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

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 1000%.

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 order that they appear in the CSS Effects panel.

To reorder filters:

1. Hover over the name of the filter 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.