logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Develop mode
Collaboration
Import and export
File settings
Account
Teams, projects, and files
Billing
Professional plan
Organization plan
Apps
Work with support
Help Center/Layer properties/Shadow effects

Shadow effects

Shadow effects are powerful tools for adding depth and dimension to designs. By adjusting properties like offset, blur, and opacity, you can create a range of visual effects to enhance text, icons, and other elements.

Add shadow effects

Motiff supports adding Drop Shadow and Inner Shadow to your design.

Drop Shadow creates shadows behind the object, including creating distance between objects, making them stand out, simulating the direction of light on the object from different angles, adding a 3D effect, styling text and icons, and adding a complete or partial border around the layer.

Inner shadows create shadows that are applied within the object. They are often used to create depth on text layers, simulate a recessed effect on objects, and indicate the activation or click state of the buttons.

'shadow.png'

You can add an unlimited number of drop shadows and inner shadows to each layer. Add shadow effects by using the following steps:

  1. 1.Select a layer on which you want to add a shadow effect.
  2. 2.Click in the Effects section of the design panel.
  3. 3.Choose your desired shadow effect from the dropdown menu.

'effects.png'

Apply shadow effect styles

To apply shadow effect styles, follow the steps listed below:

  1. 1.Click on the right side of the Effects section to open the style selector.
  2. 2.Click the shadow effect style you want to use and apply that style to your design.

Adjust shadow effects

You can use the following methods to adjust shadow effects.

  • Adjust in the expanded panel: Click at the front of an effect property and adjust the detailed properties of that effect layer.
  • X: Offset the shadow along the X-axis (horizontal).
  • Y: Offset the shadow along the Y-axis (vertical).
  • Adjust shadow range: Use the Spread property to Increase the range of the inner shadow or drop shadow. This property is only supported on rectangles, ellipses, and clipped frames. You can also blur the inner shadow and outer shadow properties is to defocus the shadows. 'Apply shadow effect styles 2.png'
  • Display drop shadows in a layer’s transparent area: 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'