diff --git a/src/core/operations/Diff.mjs b/src/core/operations/Diff.mjs
index 8410724575..9f180f861e 100644
--- a/src/core/operations/Diff.mjs
+++ b/src/core/operations/Diff.mjs
@@ -119,9 +119,9 @@ class Diff extends Operation {
 
         for (let i = 0; i < diff.length; i++) {
             if (diff[i].added) {
-                if (showAdded) output += "<span class='hl5'>" + Utils.escapeHtml(diff[i].value) + "</span>";
+                if (showAdded) output += "<ins>" + Utils.escapeHtml(diff[i].value) + "</ins>";
             } else if (diff[i].removed) {
-                if (showRemoved) output += "<span class='hl3'>" + Utils.escapeHtml(diff[i].value) + "</span>";
+                if (showRemoved) output += "<del>" + Utils.escapeHtml(diff[i].value) + "</del>";
             } else if (!showSubtraction) {
                 output += Utils.escapeHtml(diff[i].value);
             }
diff --git a/src/web/stylesheets/index.css b/src/web/stylesheets/index.css
index 960c70060c..0565399f2e 100755
--- a/src/web/stylesheets/index.css
+++ b/src/web/stylesheets/index.css
@@ -36,4 +36,5 @@
 @import "./layout/_structure.css";
 
 /* Operations */
+@import "./operations/diff.css";
 @import "./operations/json.css";
diff --git a/src/web/stylesheets/operations/diff.css b/src/web/stylesheets/operations/diff.css
new file mode 100644
index 0000000000..008cbbf599
--- /dev/null
+++ b/src/web/stylesheets/operations/diff.css
@@ -0,0 +1,8 @@
+del {
+    background-color: var(--hl3);
+}
+
+ins {
+    text-decoration: underline; /* shouldn't be needed, but Chromium doesn't copy to clipboard without it */
+    background-color: var(--hl5);
+}
diff --git a/tests/browser/02_ops.js b/tests/browser/02_ops.js
index e2c8a21978..7cb0e941f5 100644
--- a/tests/browser/02_ops.js
+++ b/tests/browser/02_ops.js
@@ -108,7 +108,7 @@ module.exports = {
         // testOp(browser, "Derive EVP key", "test input", "test_output");
         // testOp(browser, "Derive PBKDF2 key", "test input", "test_output");
         // testOp(browser, "Detect File Type", "test input", "test_output");
-        testOpHtml(browser, "Diff", "The cat sat on the mat\n\nThe mat cat on the sat", ".hl5:first-child", "mat", ["\\n\\n", "Word", true, true, false, false]);
+        testOpHtml(browser, "Diff", "The cat sat on the mat\n\nThe mat cat on the sat", "ins:first-child", "mat", ["\\n\\n", "Word", true, true, false, false]);
         // testOp(browser, "Disassemble x86", "test input", "test_output");
         testOpImage(browser, "Dither Image", "files/Hitchhikers_Guide.jpeg");
     // testOp(browser, "Divide", "test input", "test_output");
diff --git a/tests/operations/tests/StrUtils.mjs b/tests/operations/tests/StrUtils.mjs
index c78b6b23d8..70e9c3624b 100644
--- a/tests/operations/tests/StrUtils.mjs
+++ b/tests/operations/tests/StrUtils.mjs
@@ -11,7 +11,7 @@ TestRegister.addTests([
     {
         name: "Diff, basic usage",
         input: "testing23\n\ntesting123",
-        expectedOutput: "testing<span class='hl5'>1</span>23",
+        expectedOutput: "testing<ins>1</ins>23",
         recipeConfig: [
             {
                 "op": "Diff",
@@ -22,7 +22,7 @@ TestRegister.addTests([
     {
         name: "Diff added with subtraction, basic usage",
         input: "testing23\n\ntesting123",
-        expectedOutput: "<span class='hl5'>1</span>",
+        expectedOutput: "<ins>1</ins>",
         recipeConfig: [
             {
                 "op": "Diff",
@@ -33,7 +33,7 @@ TestRegister.addTests([
     {
         name: "Diff removed with subtraction, basic usage",
         input: "testing123\n\ntesting3",
-        expectedOutput: "<span class='hl3'>12</span>",
+        expectedOutput: "<del>12</del>",
         recipeConfig: [
             {
                 "op": "Diff",