diff --git a/src/element.js b/src/element.js
index 75eafdc9..48539c60 100644
--- a/src/element.js
+++ b/src/element.js
@@ -392,14 +392,34 @@ class XTerminalElementImpl extends HTMLElement {
 				const root = getComputedStyle(document.documentElement)
 				colors.background = root.getPropertyValue('--standard-app-background-color')
 				colors.foreground = root.getPropertyValue('--standard-text-color')
+				colors.selection = root.getPropertyValue('--standard-background-color-selected')
 				colors.cursor = root.getPropertyValue('--standard-text-color-highlight')
 				break
 			}
 		}
 
+		if (!this.model.profile.webgl) {
+			colors.selection = this.setMaximumOpacity(colors.selection, 0.5)
+		}
+
 		return colors
 	}
 
+	setMaximumOpacity (color, opacity) {
+		// modified from https://stackoverflow.com/a/24390910/806777
+		const cvs = document.createElement('canvas')
+		cvs.height = 1
+		cvs.width = 1
+		const ctx = cvs.getContext('2d')
+		ctx.fillStyle = color
+		ctx.fillRect(0, 0, 1, 1)
+		const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data
+		if (a / 255 <= opacity) {
+			return color
+		}
+		return `rgba(${r}, ${g}, ${b}, ${opacity})`
+	}
+
 	getXtermOptions () {
 		let xtermOptions = {
 			cursorBlink: true,
diff --git a/styles/x-terminal.less b/styles/x-terminal.less
index 7a70301b..8edb832d 100644
--- a/styles/x-terminal.less
+++ b/styles/x-terminal.less
@@ -24,6 +24,7 @@
 :root {
 	--standard-app-background-color: @app-background-color;
 	--standard-text-color: @text-color;
+	--standard-background-color-selected: @background-color-selected;
 	--standard-text-color-highlight: @text-color-highlight;
 }