Before you start

Who can use this feature

Supported on any team or plan

Users with can edit access to a Figma design file can create and adjust Effects.

Effects serve a number of purposes from the aesthetic to functional. They can enable you to signify that an element is interactive, like making a button look clickable by giving the rectangle a shadow.

Blurs can shift identify inactive or inaccessible elements, like thumbnails for unlocked game levels or provide visual hierarchy to focus a user's attention on a dialog box.

In Figma, there are four types of effects:

• Drop shadow
• Inner shadow
• Layer blur
• Background blur

Figma lets you add eight of each shadow effect, and one of each blur effect to a selection.

You can also combine shadows and blurs with blend modes and paint fills to create a variety of styles and effects.

To temporarily improve performance, you can toggle the visibility of any effects. You can also permanently rasterize layers, which will reduce their rendering time.

Rasterizing layers is an irreversible and lossy process, meaning some vector data will be lost during the conversion.

Shadow effects

There are two types of shadow effects in Figma: drop shadow and inner shadow.

Drop shadow

Drop shadows are a great way to add depth and dimension to your designs. You can do this by creating the shadow of an object on a surface behind or below it.

Drop shadows can vary in opacity, depending on the effect you want to create.

Use drop shadows to:

• Create distance between objects
• Set the direction of a light source
• Make your designs stand out against a background
• Make objects looks three-dimensional
• Stylize text and icons
• Add borders around a layer or object

Inner shadow

Like drop shadows, inner shadows allow you to create depth within two-dimensional designs.

Instead of creating a shadow behind your selection, Figma will apply a shadow within the layer or object. This contains the shadow within the layer's bounds.

Use inner shadows to:

• Create depth within text
• Make an object look recessed or indented
• Show an active or clicked state of a button

Show drop shadows through transparent layers

Figma won't display drop shadows through transparent areas of a layer by default. Figma will support knockout shadows which show behind transparent areas if a layer has:

• Only fills with less than 100% opacity
• A stroke, but no fill
• A fill or stroke with a blend mode that isn't Normal
• A center or outside stroke with less than 100% opacity

If you want to display drop shadows through an object:

1. Make sure the layer meets at least one of the above criteria.
2. Click the effects icon to open the shadow's property menu.
3. Check the Show behind transparent areas checkbox.

Shadow spread

Shadow spread is only supported on rectangles, ellipses, frames, and components.

To apply spread shadow to a frame or component you must have:

• Clip content enabled
• A visible fill with at least 1% opacity

Add shadow effects

You can apply shadow effects to frames, groups, components, or individual layers.

1. Select the layer or object from the canvas or Layers tab of the left sidebar.
2. Click the Effects section in the right sidebar. The Drop shadow effect is selected by default. Use the dropdown to switch to Inner shadow.
3. Click the Effect settings icon to adjust the shadow's settings.
   • X: Offset the drop shadow along the x axis (horizontal). Use with Y offset to set the direction of the light source.
   • Y: Offset the drop shadow along the y axis (vertical). Use with X offset to set the direction of the light source.
   • Fill: Apply a paint using the color picker and set an opacity for the shadow
   • Blur: Adjust the blur or feathering of the shadow. Increase the blur to soften the shadow and blend it with the background. Decrease the blur to create a sharper contrast.
   • Spread: Adjust the size of shadow to represent the distance between the foreground and background objects. See: Shadow spread.

Blur effects

Layer blur

Blurs help to imply action or movement, or create the illusion of depth in two-dimensional designs. Use layer blur to:

• Anonymize information
• Soften or detract focus from the background
• Create abstract backgrounds from photographs and images
• Replicate camera depth and other photographic effects like bokeh

Background blur

When you apply a background blur to a layer, Figma will blur any layers behind your selection on the canvas. You can think of this like a drop shadow, but instead of the layer creating a shadow it creates a blur.

You can use background blur to soften or detract focus. This draws attention away from the background and to the selected layer.

Background blur is used a lot for interactive menus in iOS. But you can also use background blur to obscure text or personal information in a screenshot.

To actually see a background blur, your selection will need to have an appropriate opacity. You can set opacity for layers with background blur for any value between .10 and 99.99%.

You may have to adjust the opacity of your layers to get the desired effect.If you set a layer's opacity to 100%, you won't be able to see the background blur at all.

Apply blur effects

You can apply blur effects to frames, groups, components, or individual layers. It's only possible to add one layer or background blur to a layer or object.

1. Select the layer or object from the canvas or Layers tab of the left sidebar.
2. Click the Effects section in the right sidebar. The Drop shadow effect is selected by default. Use the dropdown to switch to Layer Blur or Background Blur.
3. Click the Effect settings icon to adjust the blur's value.
4. Adjust the layer opacity, if needed.

You can also create Styles for shadow and blur effects. This allows you to save those settings and use them across your design files. Learn how to create effect Styles.

Render order

Figma will add new effects to the top of the Effects section of the right sidebar. As it's not possible to re-order effects, we recommend adding effects in the order your want them to appear.

The order Figma renders effects depends on whether your selection is a layer or group. Masks are also considered groups under this context.

The differences in group and layer shadows is most obvious on layers that overlap. When shapes don’t overlap, they will appear the same.

Layers

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

Groups

1. Layer blur (top)
2. Inner shadow
3. Paints, masks, and effects for individual fills or strokes
4. Drop shadow
5. Background blur (bottom)