Before you Start
Who can use this feature
Users on Any Plan
Users with Edit access to a File can create and edit Effects.
Types of Effects
You can add/remove effects to an effect list. Figma renders up to 8 of each shadow type, and 1 of each blur type. Keep in mind that the blurs used by these effects can lead to poor performance, with background blurs typically being the most expensive effect.
Shadows and blurs can be combined with blend modes and different colors to emulate a variety of looks, such as an "outer glow".
A versatile effect that can be used to make a shape pop off the background by casting a shadow below. Use Drop Shadows to illustrate elevation in your interface. The shadow can be offset, the blur size controls the softness, and the color and blend tint and combine the shadow.
- Drop shadows can also be efficiently applied to a group and layer under the group as a whole instead of each individual shape.
- Set a blur size of 0 to create a hard shadow of the shape. This is useful for things like borders on a single edge of a shape.
- Create an outer glow with an offset of 0 and set blend to Screen while using a light-colored fill within your effect settings.
A versatile effect that can be used to add inner depth to a shape. These have similar controls to the drop shadow but appear atop the fill but below the stroke on a shape.
- Like drop shadows, inner shadows can be applied to groups.
- Create an inner glow with an offset of 0 and set blend to Screen.
This blurs any given layer's geometry. If you blend something like an image fill, it will appear blurry and out of focus.
- Blurs of large numbers of pixels can contribute to performance issues. You can permanently rasterize the layer to improve performance if you're using Layer blur frequently (this action cannot be reversed and is lossy).
This blurs all the layers behind the layer you have applied the background blur to.
If you have layers behind that layer that also have background blur applied, we will not blur that background blur.
To see a background blur, the layer will need to have a fill opacity of less than 100%. You can set the opacity of a layer to as low as 1% to see the background blur.
- Blurs of large numbers of pixels can contribute to performance issues. If you are experiencing issues within a File, we recommend toggling off blurs and effects.
Effects Render Order
In Figma, effects apply to both layers and groups. Using group blurs and shadows can improve performance, but keep in mind the stacking order differences from the tables below.
The differences in group and layer shadows are most evident on overlapping layers. When shapes don’t overlap, then the appearance should typically be the same.
- Layer Blur (top)
- Stroke Paints
- Inner Shadow
- Fill Paints
- Drop Shadow
- Background Blur (bottom)
- Layer Blur (top)
- Inner Shadow (of Group children):
- For all Group Children
- Fill and Stroke Paints, Masks, and Effects
- Render Background Fill (if enabled and/or exported)
- Drop Shadow (of Group children and Background Fill
4. Background Blur (bottom)