diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 245af5f3d3..11368431ac 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -51,6 +51,7 @@ const globalStyles = {
     darkGray: 'rgb(68, 68, 68)',
     white25: 'rgba(255, 255, 255, 0.25)',
     white50: 'rgba(255, 255, 255, 0.5)',
+    white100: 'rgba(255, 255, 255, 1)',
     gray25: 'rgba(116, 116, 130, 0.25)',
     gray50: 'rgba(116, 116, 130, 0.5)',
     black10: 'rgba(0, 0, 0, 0.1)',
@@ -64,7 +65,8 @@ const globalStyles = {
     statsRed: '#fe521d',
     statsBlue: '#0796fa',
     statsLightGray: '#999999',
-    defaultIconBackground: '#F7F7F7'
+    defaultIconBackground: '#F7F7F7',
+    almostInvisible: 'rgba(255,255,255,0.01)'
   },
   radius: {
     borderRadius: '4px',
diff --git a/app/renderer/components/tabContent.js b/app/renderer/components/tabContent.js
index 7dde2c37a7..df7ed0755d 100644
--- a/app/renderer/components/tabContent.js
+++ b/app/renderer/components/tabContent.js
@@ -7,6 +7,7 @@ const ImmutableComponent = require('../../../js/components/immutableComponent')
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('./styles/global')
 const {isWindows} = require('../../common/lib/platformUtil')
+const {getTextColorForBackground} = require('../../../js/lib/color')
 
 /**
  * Boilerplate component for all tab icons
@@ -159,6 +160,14 @@ class TabTitle extends ImmutableComponent {
       this.hoveredOnNarrowView
   }
 
+  get themeColor () {
+    const themeColor = this.props.tabProps.get('themeColor') || this.props.tabProps.get('computedThemeColor')
+    const defaultColor = this.props.tabProps.get('isPrivate') ? globalStyles.color.white100 : globalStyles.color.black100
+    return this.props.isActive && this.props.paintTabs && themeColor
+      ? getTextColorForBackground(themeColor)
+      : defaultColor
+  }
+
   render () {
     const titleStyles = StyleSheet.create({
       reduceTitleSize: {
@@ -166,12 +175,18 @@ class TabTitle extends ImmutableComponent {
         // as closeTabIcon to avoid title overflow
         // when hovering over a tab
         marginRight: `calc(${globalStyles.spacing.iconSize} + ${globalStyles.spacing.defaultIconPadding})`
+      },
+      gradientText: {
+        backgroundImage: `-webkit-linear-gradient(left,
+        ${this.themeColor} 90%, ${globalStyles.color.almostInvisible} 100%)`
       }
     })
+
     return !this.isPinned && !this.shouldHideTitle
     ? <div data-test-id='tabTitle'
       className={css(
       styles.tabTitle,
+      titleStyles.gradientText,
       this.props.tabProps.get('hoverState') && titleStyles.reduceTitleSize,
       // Windows specific style
       isWindows() && styles.tabTitleForWindows
@@ -251,14 +266,17 @@ const styles = StyleSheet.create({
   },
 
   tabTitle: {
+    display: 'flex',
+    flex: '1',
     WebkitUserSelect: 'none',
     boxSizing: 'border-box',
     fontSize: globalStyles.fontSize.tabTitle,
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     lineHeight: '1.6',
-    padding: globalStyles.spacing.defaultTabPadding
+    padding: globalStyles.spacing.defaultTabPadding,
+    color: 'transparent',
+    WebkitBackgroundClip: 'text'
   },
 
   tabTitleForWindows: {
diff --git a/js/components/tab.js b/js/components/tab.js
index 1a9342c6dd..721cba52ad 100644
--- a/js/components/tab.js
+++ b/js/components/tab.js
@@ -278,7 +278,12 @@ class Tab extends ImmutableComponent {
             tabProps={this.props.tab}
             onClick={this.onMuteFrame.bind(this, !this.props.tab.get('audioMuted'))}
           />
-          <TabTitle tabProps={this.props.tab} pageTitle={this.displayValue} />
+          <TabTitle
+            isActive={this.props.isActive}
+            paintTabs={this.props.paintTabs}
+            tabProps={this.props.tab}
+            pageTitle={this.displayValue}
+          />
         </div>
         <PrivateIcon tabProps={this.props.tab} />
         <NewSessionIcon