diff --git a/css/_subject.scss b/css/_subject.scss
index 8599eea1a..c8ebd557a 100644
--- a/css/_subject.scss
+++ b/css/_subject.scss
@@ -14,12 +14,15 @@
     text-overflow: ellipsis;
     box-sizing: border-box;
     white-space: nowrap;
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
 
     &.visible {
         top: 0px;
     }
 
+    &.gradient {
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+    }
+
     &-text {
         vertical-align: middle;
     }
diff --git a/react/features/conference/components/web/Subject.js b/react/features/conference/components/web/Subject.js
index de2883e96..020047315 100644
--- a/react/features/conference/components/web/Subject.js
+++ b/react/features/conference/components/web/Subject.js
@@ -57,9 +57,14 @@ class Subject extends Component<Props> {
      */
     render() {
         const { _hideConferenceTimer, _showParticipantCount, _showSubject, _subject, _visible } = this.props;
+        let className = `subject ${_visible ? 'visible' : ''}`;
+
+        if (!_hideConferenceTimer || _showParticipantCount || _showSubject) {
+            className += ' gradient';
+        }
 
         return (
-            <div className = { `subject ${_visible ? 'visible' : ''}` }>
+            <div className = { className }>
                 { _showSubject && <span className = 'subject-text'>{ _subject }</span>}
                 { _showParticipantCount && <ParticipantsCount /> }
                 { !_hideConferenceTimer && <ConferenceTimer /> }