diff --git a/app/config/config-default.js b/app/config/config-default.js
index 67429815..7dd07565 100644
--- a/app/config/config-default.js
+++ b/app/config/config-default.js
@@ -133,6 +133,10 @@ module.exports = {
     // URL to custom bell
     // bellSoundURL: 'http://example.com/bell.mp3',
 
+    // Whether to use the WebGL renderer. Set it to false to use canvas-based
+    // rendering (slower, but supports transparent backgrounds)
+    webGLRenderer: true,
+
     // for advanced config flags please refer to https://hyper.is/#cfg
   },
 
@@ -149,8 +153,6 @@ module.exports = {
   // to load it and avoid it being `npm install`ed
   localPlugins: [],
 
-  webGLRenderer: true,
-
   keymaps: {
     // Example
     // 'window:devtools': 'cmd+alt+o',
diff --git a/lib/components/term.js b/lib/components/term.js
index 735bb298..869224e0 100644
--- a/lib/components/term.js
+++ b/lib/components/term.js
@@ -24,6 +24,7 @@ const getTermOptions = props => {
   // Set a background color only if it is opaque
   const needTransparency = Color(props.backgroundColor).alpha() < 1;
   const backgroundColor = needTransparency ? 'transparent' : props.backgroundColor;
+  const useWebGL = props.webGLRenderer && !needTransparency;
   return {
     macOptionIsMeta: props.modifierKeys.altIsMeta,
     scrollback: props.scrollback,
@@ -40,18 +41,14 @@ const getTermOptions = props => {
     // HACK: Terminal.setOption breaks if we don't apply these in this order
     // TODO: The above notice can be removed once this is addressed:
     // https://github.com/xtermjs/xterm.js/pull/1790#issuecomment-450000121
-    rendererType: props.webGLRenderer ? 'webgl' : 'canvas',
-    experimentalCharAtlas: props.webGLRenderer ? 'webgl' : 'dynamic',
+    rendererType: useWebGL ? 'webgl' : 'canvas',
+    experimentalCharAtlas: useWebGL ? 'webgl' : 'dynamic',
     theme: {
       foreground: props.foregroundColor,
       background: backgroundColor,
       cursor: props.cursorColor,
       cursorAccent: props.cursorAccentColor,
-      // TODO: This hard codes the selection color to opaque white because the
-      // webgl renderer doesn't support anything else at the moment. Remove this
-      // once WebGL gets support for selection color. Discussed here:
-      // https://github.com/xtermjs/xterm.js/pull/1790
-      selection: props.webGLRenderer ? '#fff' : props.selectionColor,
+      selection: props.selectionColor,
       black: props.colors.black,
       red: props.colors.red,
       green: props.colors.green,
diff --git a/lib/reducers/ui.js b/lib/reducers/ui.js
index b70fffa8..ebe59353 100644
--- a/lib/reducers/ui.js
+++ b/lib/reducers/ui.js
@@ -239,7 +239,7 @@ const reducer = (state = initial, action) => {
               ret.quickEdit = config.quickEdit;
             }
 
-            if (typeof config.webGLRenderer !== undefined) {
+            if (config.webGLRenderer !== undefined) {
               ret.webGLRenderer = config.webGLRenderer;
             }