Before you Start
Who can use this feature
Supported on any team or plan.
Anyone 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.
Blend modes allow 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.
A frame or section with a blend mode applied will blend with layers nested inside of it. For other layers, a layer with a blend mode applied will affect any layers behind it.
There are 19 blend modes available in Figma.
- Pass through (layers only)
- Plus darker
- Color burn
- Plus lighter
- Color dodge
- Soft light
- Hard light
Pass through is an additional blend mode available for layers only. Pass through is the default for layers, while Normal is the default for fills.
Apply blend mode to a fill
With a layer selected, open the color picker from the Fill section of the right sidebar.
Click the Blend mode icon in the top-right corner of the color picker.
Select the desired blend mode to apply.
You can apply one blend mode per fill. You can create multiple fills per layer and add blend mode to each fill. Learn how to create multiple fills →
Note: Blend modes can’t be added to fills for color variables, or layers with styles or variables applied. Instead, apply a blend mode to a layer or to a color style.
Tip: Preview blend modes on the canvas by hovering over each option in the menu before selecting it.
Apply blend mode to a layer
Apply a blend mode to an entire layer, and any nested layers, 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 right sidebar, open the blend mode dropdown. 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.