Help Center

Resources

Table of content

Help Center/Layer properties/Other properties/Apply shadow and blur effects

Apply shadow and blur effects

Motiff includes four types of effects:

Drop shadow
Inner shadow
Layer blur
Background blur

Shadow effects

There are two types of shadow effects in Motiff: drop shadow and inner shadow. 'shadow.png'

Drop shadow

Drop shadow is a common method to add visual depth or dimension to the design. By adjusting the offset, blur, and opacity of the drop shadow, you can achieve different visual effects:

Create distance between objects.
Create the effect of the light source on the object from different angles.
Make the object stand out more against its background.
Create a three-dimensional visual effect for the object.
Style text, icons, and other elements (including stylized text and icons).
Add a complete or partial border around the layer

Inner shadow

Similar to drop shadow, you can add visual depth or dimension to your design with an inner shadow. Instead of creating a shadow behind the object, the inner shadow creates a shadow that is applied within the object. Inner shadows are often used to:

Create depth on text layers.
Simulate a recessed effect on objects.
Indicate the activation or click state of the buttons.

Blur effects

Layer blur

Layer blur can create an illusion of motion or depth in two-dimensional static designs. Layer blur is often used to:

Soften or hide specific details.
Soften or detract the focus of the background.
Transform images into abstract and soft backgrounds.
Simulate camera depth of field effects.

'layer blur.png'

Background blur

When you apply background blur to a layer, Motiff will blur the content behind that layer.

You can use background blur to soften or diminish the visual focus. This can help shift people’s attention from the background to the foreground.

Background blur must work with opacity to produce an actual visual effect. The blur effect can be seen when the opacity is any value between 0.2% and 99.99% . The blur effect is invisible when the opacity is 100% .

Therefore, to achieve the desired blur effect, you need to adjust both the blur property of the background blur and the opacity of the layer.

'background blur.png'

Render order

Different properties on a layer have a specific rendering order, and different types of layers have different orders.

Normal layers, boolean groups, clipped frames

1.Layer blur
2.Stroke paints
3.Inner shadow
4.Fill paints
5.Drop shadow
6.Background blur

Unclipped frames

1.Layer blur
2.Inner shadow
3.Fill, stroke, effects of inner layers
4.Fill of the frame itself
5.Stroke
6.Drop shadow
7.Background blur

Groups

1.Layer blur
2.Inner shadow
3.Fill, stroke, effects of inner layers
4.Drop shadow
5.Background blur

Manage effects

Add effects

Select a layer, and click in the Effects modal of the design panel to add a drop shadow effect to the layer.

If you need to add inner shadow, layer blur, or background blur, you can click in the Effects modal of the design panel, click on the effect type, and select the desired effect from the dropdown menu. 'effects.png'

You can add an unlimited number of drop shadows and inner shadows to each layer, as well as one layer blur and one background blur.

Note: Files containing several blur effects may cause performance degradation, with background blur usually being the slowest to render. This is also related to your device's performance and network environment.

You can temporarily improve performance by hiding effects.
You can also convert layers with complex effects into PNG images to reduce render time. However, rasterizing layers is an irreversible and lossy process, which means some vector data will be lost during the conversion.

Apply effect styles

Click on the right side of the Effects modal, click on the style you want to use, and apply that style.

Adjust effects

Click at the front of an effect property and adjust the detailed properties of that effect layer in the expanded panel. Drop shadow, inner shadow, layer blur, and background blur have different properties respectively.

X: Offset the shadow along the X-axis (horizontal).
Y: Offset the shadow along the Y-axis (vertical).
Blur: Blur the object.
- Blur in the inner shadow and outer shadow properties is to defocus the shadows.
- Layer blur is to defocus the layer and all its effects.
- Background blur property is to defocus everything below the layer.
Spread: Increase the range of the inner shadow or drop shadow.
- The spread property is only supported on rectangles, ellipses, and clipped frames.

'Adjust effects.png'

By default, Motiff does not display drop shadows in the transparent areas of a layer. However, if a layer meets any of the following conditions, it can be set to support showing shadows behind transparent areas:

The layer has a fill and the fill opacity is less than 100% .
The layer has no fill but has a stroke.
The layer has a blend mode that is not Normal for fill or stroke.
The layer has a stroke with center or outside properties, and the stroke opacity is less than 100% .

'transparent areas.png'

Hide effects

You can adjust whether each effect layer is shown or hidden separately.

Click next to the effect to make it hidden.
Click next to the effect to make it shown.

Delete effects

You can delete a fill in the following ways:

Click next to an effect layer to delete that effect.
Select an effect layer and use the shortcut key Delete to delete that effect.

Adjust the order of effects

Drag up and down from the front part of each layer to adjust the order of the effects on that layer.

Copy and paste effect properties

You can select an effect property and then use ⌘ Command + C , ⌘ Command + V / Ctrl + C , Ctrl + V to copy and paste that effect.