Blend modes determine how an element's colors combine with the layers below it. Use blend modes for creative effects, color adjustments, and composite images.
Applying Blend Modes
- Select an element
- In the Properties panel, find the Blend Mode dropdown
- Choose a blend mode from the list
- Adjust opacity for intensity control
Layer Blend Modes (NEW)
Azyrom now supports both fill-level and layer-level blend modes:
Fill Blend Modes
Apply to individual fill layers within an element:
- Each fill can have its own blend mode
- Fills blend with each other within the same element
- Found in the fill properties section
Layer Blend Modes
Apply to the entire element (NEW!):
- The whole element blends with layers beneath it
- All fills and strokes blend together first, then the result blends with background
- Found in the Layer section of Properties Panel
- Works with opacity for combined effects
Use layer blend modes to apply effects to complex elements with multiple fills and strokes as a single unit. Use fill blend modes when you want fills to interact differently within the same element.
Pass Through (NEW)
Special blend mode for groups and frames:
- What It Does - Children blend individually with the backdrop instead of as a group
- Group Behavior - The group itself doesn't create a blend layer
- Use Case - Maintain blend mode behavior when grouping elements
- Default for Groups - New groups use Pass Through by default
- Figma Parity - Works exactly like Figma's Pass Through mode
Without Pass Through, grouping two elements with Multiply blend mode creates a double-multiply effect. With Pass Through, each element multiplies with the background independently, preserving the original appearance.
Normal Modes
- Normal - Default mode, colors replace what's below
- Dissolve - Random pixels based on opacity
Darken Modes
These modes darken the result:
- Darken - Keeps the darker color
- Multiply - Multiplies colors (like overlapping ink)
- Color Burn - Intense darkening with contrast
Lighten Modes
These modes lighten the result:
- Lighten - Keeps the lighter color
- Screen - Opposite of multiply (like projecting light)
- Color Dodge - Brightens and increases contrast
Contrast Modes
These modes affect contrast:
- Overlay - Combines multiply and screen
- Soft Light - Subtle contrast enhancement
- Hard Light - Intense contrast effect
Comparative Modes
- Difference - Subtracts colors (creates inversions)
- Exclusion - Similar to difference but softer
Component Modes
- Hue - Applies hue only, keeps saturation/luminosity
- Saturation - Applies saturation only
- Color - Applies hue and saturation
- Luminosity - Applies brightness only
Common Use Cases
- Multiply - Shadows, darkening images
- Screen - Glows, light effects
- Overlay - Adding texture over photos
- Color - Tinting images while preserving detail
- Difference - Checking alignment of layers
Tips
- Blend modes work best with overlapping elements
- Combine with opacity for subtle effects
- Experiment with different modes for creative results
- Blend modes export correctly to PNG with transparency
- Some modes may not translate exactly to CSS