Opacity and Blend Modes are important visual design features in Figma that control transparency and define how colors from different layers interact with each other. They are widely used for overlays, backgrounds, images, cards, buttons, gradients, illustrations, shadows, textures, glassmorphism, dark mode interfaces, and advanced visual compositions.
For structured Figma learning, explore JustAcademy Figma Training and practice concepts through the Register for Figma Course Demo.
Opacity determines how transparent or visible a layer, fill, stroke, or color appears. An opacity value of 100% means the element is completely visible, while 0% means it is completely transparent. Values between 0% and 100% create different levels of transparency.
| Opacity | Appearance | Common Use |
|---|---|---|
| 100% | Completely visible | Primary UI elements |
| 80% | Slightly transparent | Secondary elements |
| 60% | Moderately transparent | Supporting text and overlays |
| 40% | Highly transparent | Decorative elements |
| 20% | Very subtle | Background overlays |
| 0% | Invisible | Hidden visual layer |
Opacity helps designers establish visual hierarchy and control how strongly an element appears in relation to other elements. Instead of completely removing an element, a designer can reduce its opacity to make it less prominent.
When a layer is selected in Figma, opacity can be controlled from the Appearance section of the right sidebar. Opacity can also be controlled for individual fills, strokes, gradients, and certain color values.
Figma Canvas
|
+-- Select Layer
|
+-- Appearance
|
+-- Layer Opacity
|
+-- Blend Mode
|
+-- Fill
| |
| +-- Color
| +-- Fill Opacity
| +-- Blend Mode
|
+-- Stroke
|
+-- Color
+-- Opacity
Layer opacity affects the complete layer and its visual contents. Fill opacity controls the transparency of a particular fill. Understanding this difference is especially important when working with borders, shadows, multiple fills, and overlays.
| Property | Meaning | Example |
|---|---|---|
| Layer Opacity | Controls the overall transparency of the layer | Make an entire card 80% visible |
| Fill Opacity | Controls the transparency of a specific fill | Create a translucent glass card |
| Stroke Opacity | Controls transparency of the stroke | Create a subtle border |
| Gradient Stop Opacity | Controls transparency at individual gradient points | Fade an image into transparency |
Suppose a rectangle contains a solid blue fill. At 100% opacity the rectangle completely covers anything behind it. Reducing the opacity to 50% allows the background to become partially visible through the rectangle.
100% Opacity
+----------------------+
| BLUE BOX |
| Background Hidden |
+----------------------+
50% Opacity
+----------------------+
| BLUE + BACKGROUND |
| Partially Visible |
+----------------------+
Opacity can communicate importance. Primary information generally remains highly visible while supporting information can use lower opacity.
These values are starting points rather than universal rules. Designers should test the final interface for readability and accessibility.
Opacity is frequently used to communicate that an element is temporarily unavailable. For example, a disabled button may use reduced opacity together with a non-interactive cursor and appropriate text or color changes.
Normal Button
+------------------+
| Continue |
+------------------+
Opacity: 100%
Disabled Button
+------------------+
| Continue |
+------------------+
Opacity: 40%-60%
Opacity should not be the only indication of a component's state. Important states should remain understandable through appropriate color, text, icons, borders, or other visual cues.
Overlays are transparent layers placed above content. They are commonly used behind modals, dialogs, menus, drawers, image viewers, and mobile navigation panels.
Application Screen
+--------------------------------+
| Header |
| |
| Content |
| |
| +---------------+ |
| | MODAL | |
| +---------------+ |
| |
+--------------------------------+
^
|
Semi-transparent overlay
A black overlay with reduced opacity can darken the background while keeping the modal visually dominant.
Reducing image opacity can help text remain readable when placed over an image. A common technique is to place a translucent color layer above an image and below the text.
Text
|
v
+---------------------------+
| Welcome to Travel |
| |
| Semi-transparent |
| color overlay |
| |
| Background Image |
+---------------------------+
Opacity can be applied to individual gradient stops. This makes it possible to create smooth fades from a visible color into transparency.
100% opacity ----------------> 0% opacity
████████████████████████████████████████
Dark color Transparent
This technique is useful for hero sections, image overlays, cards, banners, and decorative backgrounds.
Blend modes define how the colors of one layer interact with the colors underneath it. Instead of simply placing one color over another, a blend mode applies a mathematical blending operation to produce a new result.
In Figma, blend modes can be applied to layers, fills, and certain effects. They are useful for creating overlays, image treatments, color effects, textures, lighting effects, and creative compositions.
Top Layer / Blend Color
|
v
+--------------+
| Blend Mode |
+--------------+
|
v
Underlying / Base Color
|
v
Result Color
Consider a blue layer placed over a yellow background. With Normal mode, the blue layer simply appears above the yellow layer. With Multiply, Screen, Overlay, or another blend mode, the two colors interact differently.
| Base Color | Blend Color | Blend Mode | Result |
|---|---|---|---|
| Background | Top layer | Normal | Top layer is displayed normally |
| Background | Dark color | Multiply | Darker composition |
| Background | Light color | Screen | Lighter composition |
| Background | Mixed color | Overlay | Higher contrast |
Using a blend mode on a fill instead of the complete layer can provide more precise control over the visual result.
Figma provides blend modes that can be grouped conceptually into default, darkening, lightening, contrast, comparative, and color-based operations.
| Category | Blend Modes | Typical Purpose |
|---|---|---|
| Default | Pass Through, Normal | Standard layer behavior |
| Darker | Darken, Multiply, Plus darker, Color burn | Darkening images and overlays |
| Lighter | Lighten, Screen, Plus lighter, Color dodge | Lighting and highlights |
| Contrast | Overlay, Soft light, Hard light | Contrast and lighting effects |
| Comparative | Difference, Exclusion | Creative color comparisons |
| Color | Hue, Saturation, Color, Luminosity | Color transformation |
Pass Through is the default blend behavior for layers such as groups and frames. It allows blending behavior from child layers to interact with content outside the parent container.
It is particularly important when working with grouped compositions containing multiple blend modes.
Normal is the standard blending mode. The layer or fill appears using its original color without applying a special color-combination formula.
Normal is appropriate when you want a layer to appear independently of the colors behind it.
Multiply generally produces a darker result. It is commonly used for shadows, dark overlays, image color treatments, and realistic shading.
White background
+
Dark translucent overlay
|
v
Darker visual result
Multiply is especially useful when you want the underlying image to remain visible while adding darker color information.
Screen generally produces a lighter result. It is useful for highlights, glowing effects, light overlays, and bright visual elements.
Dark background
+
Light overlay
|
v
Brighter visual result
Overlay combines darkening and lightening behavior depending on the underlying color. It can increase contrast while preserving much of the original visual character.
Overlay is commonly used for image treatments, texture overlays, lighting, and creative backgrounds.
Soft Light creates a more subtle lighting effect than Hard Light. It can gently brighten or darken the underlying content and is useful for soft highlights, textures, and photographic treatments.
Hard Light creates a stronger contrast effect. It can produce intense highlights and shadows and is useful for dramatic visual compositions, illustrations, and creative image treatments.
Darken compares the base and blend colors and keeps the darker result. It can be useful for combining graphical elements where lighter portions should disappear against a darker background.
Lighten compares the colors and keeps the lighter result. It is useful for combining highlights and visual elements where darker areas should not dominate.
Color Burn darkens the base color while increasing contrast. It can create rich, dramatic color treatments but should be used carefully because it can produce very strong results.
Color Dodge generally creates a brightening effect. It is useful for highlights, glowing effects, luminous overlays, and creative image compositions.
Difference compares the base and blend colors and creates a high-contrast result based on their differences. It is often used for experimental graphics, visual effects, and creative compositions.
Exclusion produces a visual result similar to Difference but generally with a softer contrast. It can be useful for experimental backgrounds and abstract visual effects.
Hue uses the hue information from the blend layer while preserving other characteristics of the underlying color. It can be useful when changing the color family of an image or graphic.
Saturation uses the saturation level of the blend color while preserving the underlying hue and brightness characteristics.
This can be useful when increasing or reducing the intensity of colors in an image.
Color uses hue and saturation from the blend layer while maintaining the underlying luminosity. This makes it useful for recoloring monochrome images and applying color treatments.
Luminosity uses brightness information from the blend layer while preserving hue and saturation characteristics from the underlying content. It can be useful for controlling brightness without completely replacing the original colors.
| Feature | Multiply | Screen |
|---|---|---|
| General Result | Darker | Lighter |
| Useful For | Shadows and dark overlays | Highlights and light effects |
| Black | Produces very dark result | Generally preserves darkness |
| White | Generally preserves base color | Produces a very light result |
| Common UI Use | Image overlays | Glow and highlights |
Opacity and blend modes become more powerful when used together. The blend mode determines how colors interact, while opacity controls how strongly the blended layer contributes to the final appearance.
Base Image
+
Blend Mode: Multiply
+
Opacity: 30%
|
v
Subtle Dark Overlay
For example, a black rectangle using Multiply at 100% opacity can be very strong, while the same rectangle at 20% or 30% opacity can create a subtle cinematic overlay.
+----------------------------------+
| Heading |
| |
| Text remains readable |
| |
| Multiply Overlay |
| 20% - 40% opacity |
| |
| IMAGE |
+----------------------------------+
A colored rectangle can be placed above an image and combined with a blend mode to create a branded image treatment.
Image
|
+-- Brand Color Overlay
| Blend Mode: Multiply
| Opacity: 20%-50%
|
+-- Text
This technique is useful for landing pages, social media graphics, banners, hero sections, and marketing designs.
Textures can be placed above a background and combined using blend modes. Overlay, Soft Light, Multiply, and Screen are common starting points depending on whether the texture should darken, lighten, or increase contrast.
Texture Layer
|
| Blend Mode
v
Background
|
v
Combined Texture Effect
Blend modes can be used to create creative image compositions by combining photographs, gradients, shapes, and color layers.
Figma allows multiple fills to be applied to a layer. Each fill can contribute differently to the final appearance, making multiple fills useful for gradients, overlays, textures, and color effects.
Rectangle
|
+-- Fill 1: Base Color
|
+-- Fill 2: Gradient
|
+-- Fill 3: Texture
|
+-- Fill 4: Highlight
Each fill can be adjusted independently where supported, allowing designers to build complex visual effects without creating many separate layers.
Glassmorphism commonly combines a translucent fill with background blur, borders, shadows, and sometimes blend modes. Opacity is essential because a fully opaque layer would hide the content behind it.
Background Image
|
v
+-----------------------+
| Glass Card |
| Fill: White |
| Opacity: Low/Medium |
| Background Blur |
| Border: Subtle |
+-----------------------+
The exact values should be adjusted according to the background, contrast requirements, and overall visual system.
Transparent or semi-transparent navigation bars can be used over images or scrolling content. A translucent fill combined with background blur can create a modern floating navigation effect.
Modal backdrops typically use a dark color with reduced opacity. The goal is to reduce visual attention on the background without completely hiding it.
Background Content
|
v
Black Overlay
Opacity: approximately 30%-60%
|
v
Modal Dialog
Opacity: 100%
Tooltips may use a high-opacity dark background with fully visible text. Decorative shadows can be combined with the tooltip to establish separation from the surrounding interface.
Cards can use slightly transparent fills to create layered interfaces. This is especially useful for dashboard interfaces, media applications, and glass-style designs.
| Card Type | Possible Opacity Approach |
|---|---|
| Standard Card | 100% solid fill |
| Secondary Card | Slightly reduced fill opacity |
| Glass Card | Translucent fill + background blur |
| Disabled Card | Reduced overall opacity |
| Overlay Card | Color overlay with reduced opacity |
Opacity can be part of hover, active, selected, and disabled states, but it should be used consistently across the component system.
| State | Possible Treatment |
|---|---|
| Default | Full-strength visual |
| Hover | Subtle overlay or color adjustment |
| Pressed | Stronger overlay or darker treatment |
| Selected | Visible background or border treatment |
| Disabled | Reduced opacity with additional state cues |
Blend modes can also be applied to supported effects such as certain shadows. This allows shadows to interact differently with the background rather than simply appearing as a standard opaque shadow.
For example, a dark shadow using Multiply can create a more natural interaction with colorful backgrounds.
Dark mode requires careful handling of transparency. A black overlay that looks subtle on a light background can become too heavy on a dark background.
Figma variables can help organize reusable color and opacity values in a design system. For example, a design system can define opacity-related values for overlays, disabled states, and other recurring visual treatments.
Opacity Tokens
|
+-- opacity/100
+-- opacity/80
+-- opacity/60
+-- opacity/40
+-- opacity/20
+-- opacity/10
This makes large design systems easier to maintain because repeated values can be centrally managed rather than manually adjusted across many screens.
A design token system can define semantic opacity values instead of relying only on arbitrary numbers.
| Token | Purpose |
|---|---|
| opacity/full | Fully visible UI elements |
| opacity/strong | Strong secondary elements |
| opacity/medium | Supporting content |
| opacity/subtle | Decorative content |
| opacity/overlay | Modal and backdrop overlays |
| opacity/disabled | Disabled components |
Opacity values can be incorporated into component variants. For example, a button component can have Default, Hover, Pressed, Disabled, and Loading variants.
Button Component
|
+-- Default
| Opacity: 100%
|
+-- Hover
| Overlay/Color Adjustment
|
+-- Pressed
| Darker Treatment
|
+-- Disabled
| Reduced Opacity
|
+-- Loading
Reduced Content Emphasis
When a Figma design is implemented on the web, layer opacity is commonly represented with the CSS opacity property.
.card {
opacity: 0.8;
}
.overlay {
opacity: 0.4;
}
Color transparency can also be represented using modern color functions such as rgba() or hexadecimal alpha values.
.overlay {
background: rgba(0, 0, 0, 0.4);
}
Many Figma blend modes have corresponding CSS compositing properties, although the exact rendering can depend on the element structure and browser implementation.
.image-overlay {
mix-blend-mode: multiply;
}
.highlight {
mix-blend-mode: screen;
}
.texture {
mix-blend-mode: overlay;
}
| Opacity | Blend Mode |
|---|---|
| Controls transparency | Controls color interaction |
| Ranges from transparent to opaque | Uses different blending calculations |
| Does not define a special color relationship by itself | Changes how layers interact |
| Useful for overlays and hierarchy | Useful for image and color effects |
| Can be combined with blend modes | Can be combined with opacity |
Build a hero section using an image, color overlay, opacity, blend mode, and typography.
Hero Frame
|
+-- Background Image
|
+-- Color Overlay
| Blend Mode: Multiply
| Opacity: 20%-50%
|
+-- Heading
|
+-- Description
|
+-- CTA Button
Background
|
v
+-----------------------+
| Glass Card |
| |
| Title |
| Description |
| |
| Action |
+-----------------------+
Fill: translucent
Blur: background
Border: subtle
Shadow: subtle
Create a modal interface using a semi-transparent backdrop.
Application
|
v
Dark Backdrop
Opacity: 40%
|
v
+-----------------------+
| Confirm |
| |
| Are you sure? |
| |
| Cancel Confirm |
+-----------------------+
The backdrop separates the modal from the application without completely hiding the page.
Create a subtle texture effect by placing a texture layer above a background and experimenting with Overlay, Soft Light, Multiply, or Screen.
Texture
Blend Mode: Overlay
Opacity: 10%-30%
|
v
Background Color
|
v
Textured Surface
Create a dashboard containing cards, charts, navigation, buttons, and overlays. Use opacity and blend modes consistently to establish hierarchy.
Opacity and blend modes can affect text contrast and visibility. A visually attractive design is still required to communicate information clearly.
Complex visual effects, especially when combined across many layers, can make design files harder to render or maintain. Use effects and blend modes where they provide meaningful visual value.
Identify Visual Goal
|
v
Choose Layer
|
v
Set Base Color
|
v
Adjust Opacity
|
v
Choose Blend Mode if Required
|
v
Preview on Real Background
|
v
Check Contrast
|
v
Create Reusable Style/Variable
|
v
Add to Component
|
v
Test Final Design
| Technique | Main Purpose | Example |
|---|---|---|
| Opacity | Transparency | Modal overlay |
| Multiply | Darkening | Image overlay |
| Screen | Lightening | Glow effect |
| Overlay | Contrast | Texture |
| Soft Light | Subtle lighting | Image enhancement |
| Hard Light | Strong contrast | Dramatic graphic |
| Color | Recoloring | Monochrome image tint |
| Difference | Color comparison | Experimental graphics |
Opacity controls how transparent or visible a layer, fill, or color appears. 100% is fully visible and 0% is completely transparent.
A blend mode controls how the colors of a layer, fill, or supported effect interact with the colors underneath it.
Opacity controls transparency, while a blend mode controls how colors are mathematically combined with underlying content.
Multiply generally creates a darker result and is useful for shadows, dark overlays, and image treatments.
Screen generally creates a lighter result and is useful for highlights, light effects, and glow-style treatments.
Overlay combines darkening and lightening behavior and is commonly used for contrast and texture effects.
Yes. A blend mode controls the color interaction while opacity controls the strength or transparency of the resulting layer.
They are useful for image treatments, overlays, textures, lighting, recoloring, illustrations, and advanced visual compositions.
Pass Through is the default behavior for layers such as groups and frames and allows child blending behavior to interact with content outside the parent container.
Very low opacity can reduce readability and accessibility. Important content should remain sufficiently visible and should not rely only on transparency to communicate meaning.
Create a modern landing page in Figma using the following requirements:
Opacity and Blend Modes are powerful Figma features for controlling transparency, hierarchy, color interaction, image treatments, overlays, textures, and advanced visual effects. Opacity determines how strongly an element appears, while blend modes determine how its colors interact with the layers underneath.
By combining opacity with appropriate blend modes such as Multiply, Screen, Overlay, Soft Light, Color, and others, designers can create sophisticated interfaces, image compositions, glass effects, overlays, textures, and interactive states. For professional practice and structured learning, visit JustAcademy Figma Training and use the Register for Figma Course Demo option.
