diff --git a/src/web/css/editor.css b/src/web/css/editor.css
index e7e85bf6..6cea932b 100644
--- a/src/web/css/editor.css
+++ b/src/web/css/editor.css
@@ -480,6 +480,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket-region {
   cursor: pointer;
 }
 
+div.repl-animation {
+  background-color: var(--background) !important;
+}
+
 div.trace {
   overflow-x: auto;
   padding-top: 1px;
diff --git a/src/web/js/repl-ui.js b/src/web/js/repl-ui.js
index ddcb7b55..9fdfc9b1 100644
--- a/src/web/js/repl-ui.js
+++ b/src/web/js/repl-ui.js
@@ -342,7 +342,7 @@
         });
       var currentZIndex = 15000;
       runtime.setParam("current-animation-port", function(dom, title, closeCallback) {
-          var animationDiv = $("<div>").css({"z-index": currentZIndex + 1});
+          var animationDiv = $("<div class='repl-animation'>").css({"z-index": currentZIndex + 1});
           animationDivs.push(animationDiv);
           output.append(animationDiv);
           function onClose() {
diff --git a/src/web/js/trove/world.js b/src/web/js/trove/world.js
index 3909b94a..7eded91a 100644
--- a/src/web/js/trove/world.js
+++ b/src/web/js/trove/world.js
@@ -532,7 +532,7 @@
               }
               var ctx = reusableCanvas.getContext("2d");
               ctx.save();
-              ctx.fillStyle = "rgba(255,255,255,1)";
+              ctx.fillStyle = "rgba(255,255,255,0)";
               ctx.fillRect(0, 0, width, height);
               ctx.restore();
               theImage.render(ctx, 0, 0);