Effects Properties

Opacity
Defines opacity of this component. If this component is a group or container, all elements inside will be affected.

The Opacity property

Add Shadow
Attaches one or more shadows to this component. You can choose Box Shadow, Text Shadow, or Drop Shadow.

The Drop Shadow option works only in browser versions that are based on WebKit and in Firefox since version 45. Browsers based on WebKit include Chrome, Safari, Opera, iOS Safari, Android Browser, and Chrome for Android. Drop shadows might not work in Internet Explorer or Opera Mini.

Adding a shadow

Add Effect
Attaches one or more filter effects to this element. After selecting a filter from the drop-down menu, click the filter name and specify a value.

For components, the available effects are Saturation, Grayscale, Contrast, Brightness, Blur, Invert, Sepia, and Hue Rotate.

For SVG shapes, the available effects are SVG filter primitives: Blend, Flood, Color Matrix, Component Transfer, Composite, Convolve Matrix, Diffuse Lighting, Displacement Map, Gaussian Blur, Image, Merge, Morphology, Offset, Specular Lighting, Tile, and Turbulence.

These effects work only in browser versions that are based on WebKit and in Firefox since version 45. Browsers based on WebKit include Chrome, Safari, Opera, iOS Safari, Android Browser, and Chrome for Android. These options might not work in Internet Explorer or Opera Mini.

Adding an effect

Ratio
Defines the value of this filter effect. The meaning of this value differs depending on the type of effect. To view and edit this property, click the filter name.

Saturation
Changes the saturation of the element. Values under 100% create results with less saturation, and values over 100% create results with more saturation. A value of 100% leaves the element unchanged. A value of 0% makes the element appear completely unsaturated.

Grayscale
Converts the element to grayscale. A value of 100% makes the element appear completely grayscale. A value of 0% leaves the element unchanged.

Contrast
Controls the element's contrast. Values under 100% create results with less contrast, and values over 100% create results with more contrast. A value of 100% leaves the element unchanged. A value of 0% removes all contrast.

Brightness
Controls the element's brightness. Values under 100% create results that appear dimmer, and values over 100% create results that appear brighter. A value of 100% leaves the element unchanged. A value of 0% makes the element appear completely black.

Invert
Inverts the samples in the input element, giving a "photo negative" effect. A value of 100% inverts samples completely. A value of 0% leaves the element unchanged.

Sepia
Converts the element to sepia. A value of 100% makes the element appear completely sepia. A value of 0% leaves the element unchanged.

Hue Rotate
Applies a hue rotation to the element. Specifies the number of degrees around the color circle the input colors will be adjusted. A value of zero or 360 leaves the input unchanged. A value of 180 inverts the hues.

The Ratio property

Size
Controls the Gaussian blur on the input image, in pixels, for a blur filter. A larger value creates more blur.

The Size property

X, Y, Width, Height
For SVG shapes only. Define the region that the SVG filter effects apply to. The defaults are X = 0, Y = 0, Width = 100%, and Height = 100%.

Filter Units
For SVG shapes only. Defines the coordinate system of the filter region:

Object bounding box (default)
The filter region is relative to the bounding box of the shape.

User space on use
The filter region uses the coordinate system of the element that references the filter.