Create unique effects with Blend modes
Before you Start
Who can use this feature
Supported on any team or plan.
Users with edit access to a file can add or adjust Blend modes
Blend Modes allow you to define how you want two layers to blend together. This involves taking the pixels from each layer and applying calculations to them.
This allows you to adjust aspects of an image, like the background color. Or, create interesting overlays and textures.
You can adjust the Blend mode of an entire layer, or an individual fill. You can only apply one blend mode to each layer or Fill.
Blend Modes
There are 16 Blend modes available in Figma.
- Normal
- Darken
- Multiply
- Color burn
- Light
- Screen
- Color dodge
- Overlay
- Soft light
- Hard light
- Difference
- Exclusion
- Hue
- Saturation
- Color
- Luminosity
Fill
-
Click on the Fill thumbnail in the Properties Panel to open the Color picker.
-
Click the droplet icon in the top-right corner of the Color picker to select a Blend mode:
-
Select the desired Blend mode to apply. You can only apply one blend mode to each fill.
-
Click the X to return to the Canvas.
Tip: Preview blend modes on the canvas by hovering over each option in the menu before selecting it.
Layer
Apply a blend mode to an entire layer in the Layer section of the right sidebar.
-
Select the layer you want to apply the blend mode to.
-
In the Layer section of the Properties Panel, click on the blend mode field. This will be set to Pass Through by default.
-
Select the desired Blend mode to apply. You can apply one blend mode to each layer.