Shadows & Blurs

Shadows and blurs can enhance your design by adding depth or focus.^[1] For instance, a shadow under a button can make it pop and show it's clickable.

Figma offers four effect types:

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

These effects can be layered with blend modes and colors for diverse styles. To add these, go to the Design panel, click + under the Effects section, and pick your effect from the dropdown in the modal that appears. Be mindful, though, as too many blurs, especially background blurs, might slow down your file. This depends on your device and internet speed.

Drop shadows can bring your designs to life by adding dimensionality and making elements pop off the screen. They simulate the shadow an object would cast on the surface behind it, providing a sense of space and dimensionality.

To apply a realistic drop shadow to an element:

1. Head to the Effects section in the Design panel.
2. Select Drop shadow from the dropdown.
3. Click on the Effect settings icon on the left of the dropdown to reveal a modal with more settings.
4. Set the opacity to around 8-16% to keep shadows soft.
5. Adjust the blur to 8-12px for a natural blur.
6. Use 2-4px offsets to mimic natural lighting, with X for horizontal light direction and Y for vertical.
7. Opt for a dark grey with adjusted opacity over solid black for a more lifelike shadow. Alternatively, you can use the same color as the element's fill or a branding color of the interface.
8. For spread, a value of 2-4px works well for most designs, adding subtle expansion without overpowering the element.

Inner shadows, similar to drop shadows, add depth to your 2D designs. However, unlike drop shadows that appear behind an object, inner shadows sit inside the layer or object, giving the illusion that the shadow is contained within its boundaries.

Inner shadows are great for:

• Adding depth to text, making it pop
• Creating a recessed or indented look on objects
• Indicating an active or clicked state for buttons, enhancing UI interactivity.

For crafting an inner shadow for a clicked button, use these specific settings:

• Opacity: 30-40% to achieve a subtle, yet discernible shadow
• Offsets: X: 0px, Y: 2px to simulate the shadow falling inside the button
• Color: Use a color slightly darker than the button’s background — for a light button, a dark grey like #646464 can work well
• Blur: 4-6px to soften the edges of the shadow, making it appear as if the button is pressed down.

Shadow spread adds depth and emphasis to specific elements like rectangles, ellipses, frames, and components. However, it's important to know that this effect requires certain settings to work effectively.

To use shadow spread on frames or components, make sure Clip content box is checked in the Design panel under the Layout section. This option ensures that any shadow applied doesn't exceed the boundaries of the object it's applied to. Also, your element needs to have a visible fill set to at least 1% opacity. Without these settings, the spread shadow won't be visible.

To adjust the shadow spread, go to the Effects section on the Design panel. Click on the Effect settings icon and manually enter the desired value.

Shadow offsets along the X (horizontal) and Y (vertical) axes are essential for creating depth and dimension in your designs. By adjusting these offsets, you can simulate how a light source affects the shadow of an object, giving your designs a more realistic appearance.

• X offset: Moves the shadow left or right. This simulates the horizontal position of your light source. For example, a positive value moves the shadow to the right, suggesting the light comes from the left.
• Y offset: Moves the shadow up or down. This mimics the vertical position of the light source. A positive value here drops the shadow lower, indicating the light is above the object.

Using both X and Y offsets together, you can precisely control the shadow direction, making objects appear as though they're lifted off the page or embedded within it. This technique is perfect for UI elements, text, and icons, adding a layer of depth that flat designs lack.

To adjust the shadow offsets, go to the Effects section on the Design panel. Click on the Effect settings icon and manually enter the desired X and Y position values.

Blurs can improve your designs by adding a sense of motion, depth, or focus. They’re useful for obscuring sensitive data or personal details, reducing distractions, and emphasizing key elements. Blurs can also mimic camera effects like bokeh or depth of field. For backgrounds, a slight blur can help foreground elements stand out. For anonymizing, increase the blur until details are fully hidden.

To add a blur effect, go to the Design panel, open the Effects section, and choose Layer blur from the dropdown. Click the Effect settings icon, and you’ll find two types of Layer blur:

• Uniform blur: Applies a constant blur across the entire layer. Select the Uniform option and enter the desired blur value.
• Progressive blur: Applies a blur that increases or decreases gradually across the layer. Select the Progressive option to adjust the start and end blur values. This works well for simulating depth or directional focus without using extra layers or masks.

Background blurs add a soft, out-of-focus effect to the area behind a selected layer, unlike layer blurs that blur the layer itself. Use background blur to shift focus towards the primary layer, ideal for highlighting interactive menus or obscuring sensitive details in screenshots. Commonly seen in iOS menus, background blur enhances UI design by softening the background, making the foreground elements stand out.

To add a background blur effect, go to the Design panel, open the Effects section, and choose Background blur from the dropdown. Click the Effect settings icon, and you’ll find two types of Layer blur:

• Uniform blur: Applies a constant blur across the entire layer. Select the Uniform option and enter the desired blur value.
• Progressive blur: Applies a blur that increases or decreases gradually across the layer. Select the Progressive option to adjust the start and end blur values.

Keep in mind that for the blur effect to be visible, the selected layer must have some transparency. You can adjust the top layer's opacity to be anywhere from 0.10% to 99.99% in the Fill section in the Design panel. Remember, a layer set to 100% opacity will block the background blur entirely.