Figma Advanced Effects

Effects add depth, dimension, and visual polish to a design. Figma provides drop shadows, inner shadows, layer blurs, and background blurs. Used thoughtfully, these effects make flat designs feel more realistic and guides users' attention.

The Effects Panel

Select any layer. In the right panel, scroll to Effects and click + to add an effect. Click the effect icon on the left of the row to open the effect settings. A layer can have multiple effects stacked on it — for example, a card with both a drop shadow and a subtle inner shadow.

Drop Shadow

A drop shadow simulates a light source casting a shadow beneath the element. Six controls shape the shadow:

Drop Shadow Settings:
  X offset:   0   (shadow shifts right if positive, left if negative)
  Y offset:   4   (shadow shifts down if positive, up if negative)
  Blur:       16  (higher = softer, more spread-out shadow)
  Spread:     0   (positive = shadow grows bigger; negative = smaller)
  Color:      Black at 12% opacity

Shadow Elevation System

Consistent shadow levels communicate depth. A button sits above the page (low elevation). A modal dialog sits above the button (high elevation). Assign shadows based on elevation level:

Elevation 1 (subtle, e.g., cards):
  Y:2  Blur:8   Spread:0  Black 8%

Elevation 2 (raised, e.g., buttons, inputs):
  Y:4  Blur:16  Spread:0  Black 12%

Elevation 3 (floating, e.g., modals, drawers):
  Y:8  Blur:32  Spread:0  Black 20%

Inner Shadow

An inner shadow draws the shadow inside the shape rather than outside it. This creates a pressed, inset, or engraved look — often used on input fields to make them look recessed into the page.

Input field with inner shadow:
  Inner Shadow: Y:2  Blur:4  Black 10%
  → The field looks like a tray cut into the surface.

Layer Blur

Layer blur blurs the entire selected layer. Unlike shadows, blur is applied directly to the element's visual content. A high blur value makes text or images look out of focus. Common uses:

• Simulating a loading or inactive state.
• Creating depth-of-field effects behind a focused element.
• Blurring a background image intentionally for a soft aesthetic.

Background Blur

Background blur blurs everything visible behind the selected layer. Apply it to a semi-transparent rectangle to create a frosted glass effect — popular in modern iOS-style designs.

Frosted Glass Card Effect:
  1. Draw a rectangle over a colorful background image.
  2. Set fill to White at 30% opacity.
  3. Add Background Blur: 20px.
  Result: The card looks like frosted glass through which
          the background is visible but blurred.

Important Background Blur Requirement

Background blur only renders correctly when the layer has a fill with some level of transparency. A fully opaque fill blocks the background completely; background blur has no effect. A fill at 0% opacity makes the layer invisible. Use 20–50% opacity for the best frosted glass appearance.

Blend Modes with Effects

Changing a shadow's blend mode from Normal to Multiply makes the shadow darken the colors beneath it realistically — instead of showing a flat black shape. This is especially important when shadows fall over colorful backgrounds.

Shadow on white background:
  Normal blend: Shadow shows as a gray rectangle outline
  Multiply blend: Shadow darkens the white realistically

Shadow on blue background:
  Normal blend: Gray shadow looks wrong on blue
  Multiply blend: Shadow creates a darker blue — correct!

Noise and Texture Overlays (Plugin-Assisted)

Figma does not have a built-in noise generator, but plugins like Noise & Texture add grain or texture fills to shapes. Placing a subtle noise layer over a gradient creates a more organic, tactile surface — a popular technique in modern UI illustration styles.

Masking

A mask uses one layer's shape to cut out the visible area of the layers above it. Only the area covered by the mask shape stays visible.

Creating a Mask

1. Stack an image on top of a shape (for example, a circle).
2. Select both layers.
3. Right-click → Use as mask (or press Ctrl/Cmd + Alt + M).
4. The image clips to the circle shape — a perfect circular avatar.

Before Mask:    [Photo rectangle overlapping circle]
After Mask:     [Photo clipped inside circle shape only]

Clipping Masks vs Frame Clipping

Frame clipping (clip content setting on a frame) clips all children to the frame's boundaries automatically. Masking gives you more control — the mask shape can be any custom form, not just the frame's rectangle. Use frame clipping for simple rectangular boundaries and masking for circles, custom shapes, or complex cutouts.