diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
index 03e8b1c..0e91684 100644
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@@ -22,7 +22,7 @@ import {contentBox} from '../box-sizing';
 import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container';
 import {SVGElementContainer} from '../../dom/replaced-elements/svg-element-container';
 import {ReplacedElementContainer} from '../../dom/replaced-elements/index';
-import {EffectTarget, IElementEffect, isClipEffect, isTransformEffect} from '../effects';
+import {EffectTarget, IElementEffect, isClipEffect, isTransformEffect, isOpacityEffect} from '../effects';
 import {contains} from '../../core/bitwise';
 import {calculateGradientDirection, calculateRadius, processColorStops} from '../../css/types/functions/gradient';
 import {FIFTY_PERCENT, getAbsoluteValue} from '../../css/types/length-percentage';
@@ -116,17 +116,15 @@ export class CanvasRenderer {
             this.path(effect.path);
             this.ctx.clip();
         }
-
+        if (isOpacityEffect(effect)) {
+            this.ctx.globalAlpha = effect.val;
+        }
         this._activeEffects.push(effect);
     }
 
     popEffect() {
-        const globalAlpha = this.ctx.globalAlpha;
         this._activeEffects.pop();
         this.ctx.restore();
-        if (globalAlpha) {
-            this.ctx.globalAlpha = globalAlpha;
-        }
     }
 
     async renderStack(stack: StackingContext) {
diff --git a/src/render/effects.ts b/src/render/effects.ts
index f9df190..243e468 100644
--- a/src/render/effects.ts
+++ b/src/render/effects.ts
@@ -3,7 +3,8 @@ import {Path} from './path';
 
 export const enum EffectType {
     TRANSFORM = 0,
-    CLIP = 1
+    CLIP = 1,
+    OPACITY = 2
 }
 
 export const enum EffectTarget {
@@ -44,6 +45,19 @@ export class ClipEffect implements IElementEffect {
     }
 }
 
+export class OpacityEffect implements IElementEffect {
+    readonly type: EffectType;
+    readonly target: number;
+    readonly val: number;
+
+    constructor(val: number, target: EffectTarget) {
+        this.type = EffectType.OPACITY;
+        this.target = target;
+        this.val = val;
+    }
+}
+
 export const isTransformEffect = (effect: IElementEffect): effect is TransformEffect =>
     effect.type === EffectType.TRANSFORM;
 export const isClipEffect = (effect: IElementEffect): effect is ClipEffect => effect.type === EffectType.CLIP;
+export const isOpacityEffect = (effect: IElementEffect): effect is OpacityEffect => effect.type === EffectType.OPACITY;
diff --git a/src/render/stacking-context.ts b/src/render/stacking-context.ts
index 32497e3..2dde610 100644
--- a/src/render/stacking-context.ts
+++ b/src/render/stacking-context.ts
@@ -1,7 +1,7 @@
 import {ElementContainer, FLAGS} from '../dom/element-container';
 import {contains} from '../core/bitwise';
 import {BoundCurves, calculateBorderBoxPath, calculatePaddingBoxPath} from './bound-curves';
-import {ClipEffect, EffectTarget, IElementEffect, TransformEffect} from './effects';
+import {ClipEffect, EffectTarget, IElementEffect, TransformEffect, OpacityEffect} from './effects';
 import {OVERFLOW} from '../css/property-descriptors/overflow';
 import {equalPath} from './path';
 import {DISPLAY} from '../css/property-descriptors/display';
@@ -59,6 +59,10 @@ export class ElementPaint {
                 this.effects.push(new ClipEffect(paddingBox, EffectTarget.CONTENT));
             }
         }
+
+        if (element.styles.opacity < 1) {
+            this.effects.push(new OpacityEffect(element.styles.opacity, EffectTarget.CONTENT));
+        }
     }
 
     getParentEffects(): IElementEffect[] {
@@ -70,6 +74,9 @@ export class ElementPaint {
                 effects.push(new ClipEffect(paddingBox, EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT));
             }
         }
+        if (this.container.styles.opacity < 1) {
+            effects.push(new OpacityEffect(this.container.styles.opacity, EffectTarget.CONTENT));
+        }
         return effects;
     }
 }