diff --git a/src/components/bottom-bar/_bottom-bar.scss b/src/components/bottom-bar/_bottom-bar.scss
index b79c2d9b7..585333155 100644
--- a/src/components/bottom-bar/_bottom-bar.scss
+++ b/src/components/bottom-bar/_bottom-bar.scss
@@ -1,16 +1,5 @@
-@mixin bottom-bar-gradient {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 50%;
-  max-height: 200px;
-  opacity: 1;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
-  content: "";
-}
-
 .player .bottom-bar {
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
   color: #fff;
   height: auto;
   width: 100%;
@@ -102,12 +91,6 @@
 .player.ad-break,
 .player.menu-active {
   &:not(.overlay-active) {
-    :global(.#{$video-filter}) {
-      &:after {
-        @include bottom-bar-gradient();
-      }
-    }
-
     .bottom-bar {
       position: relative;
       opacity: 1;
@@ -142,10 +125,3 @@
     }
   }
 }
-
-:global(.#{$video-filter}) {
-  &:after {
-    transition: #{$hover-animation-time}ms opacity ease-in-out;
-    opacity: 0;
-  }
-}
diff --git a/src/components/bottom-bar/bottom-bar.tsx b/src/components/bottom-bar/bottom-bar.tsx
index e9d76c1e6..dbca7df2d 100644
--- a/src/components/bottom-bar/bottom-bar.tsx
+++ b/src/components/bottom-bar/bottom-bar.tsx
@@ -11,6 +11,7 @@ import {withPlayer} from '../player';
 import {calculateControlsSize, filterControlsByPriority} from './bettom-bar-utils';
 import {BottomBarRegistryManager, bottomBarRegistryManager} from './bottom-bar-registry-manager';
 
+
 const LOWER_PRIORITY_CONTROLS: string[][] = [
   ['PictureInPicture'],
   ['VrStereo'],
@@ -52,10 +53,10 @@ const COMPONENT_NAME = 'BottomBar';
 @withEventManager
 @connect(mapStateToProps, bindActions({...actions, ...bottomBarActions}))
 class BottomBar extends Component<any, any> {
-  private bottomBarContainerRef: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
-  private presetControls: {[controlName: string]: boolean} = {};
-  private currentBarWidth: number = 0;
-  private resizeObserver!: ResizeObserver;
+  bottomBarContainerRef: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
+  presetControls: {[controlName: string]: boolean} = {};
+  currentBarWidth: number = 0;
+  resizeObserver!: ResizeObserver;
 
   // eslint-disable-next-line require-jsdoc
   constructor(props: any) {
@@ -77,18 +78,18 @@ class BottomBar extends Component<any, any> {
    * @returns {void}
    * @memberof BottomBar
    */
-  public componentDidMount(): void {
+  componentDidMount(): void {
     this.resizeObserver = new ResizeObserver((entry: ResizeObserverEntry[]) => this.onBarWidthChange(entry));
     this.resizeObserver.observe(this.bottomBarContainerRef.current!);
   }
 
   // eslint-disable-next-line require-jsdoc
-  public componentWillUnmount(): void {
+  componentWillUnmount(): void {
     this.resizeObserver.disconnect();
   }
 
   // eslint-disable-next-line require-jsdoc
-  private onBarWidthChange(entry: ResizeObserverEntry[]): void {
+  onBarWidthChange(entry: ResizeObserverEntry[]): void {
     const barWidth = entry[0].contentRect.width;
     if (barWidth !== this.currentBarWidth) {
       const activeControls = Object.keys(this.state.activeControls).filter(c => this.state.activeControls[c]);
@@ -100,19 +101,14 @@ class BottomBar extends Component<any, any> {
     }
   }
 
-  private onToggleControl = (controlName: string, isActive: boolean): void => {
+  onToggleControl = (controlName: string, isActive: boolean): void => {
     if (controlName in this.state.activeControls && this.state.activeControls[controlName] !== isActive) {
       this.setState(state => ({activeControls: {...state.activeControls, ...{[controlName]: isActive}}}));
     }
   };
 
   // eslint-disable-next-line require-jsdoc
-  private filterControls(
-    currentBarWidth: number,
-    currentMinBreakPointWidth: number,
-    currentControlWidth: number,
-    lowerPriorityControls: string[][]
-  ): void {
+  filterControls(currentBarWidth: number, currentMinBreakPointWidth: number, currentControlWidth: number, lowerPriorityControls: string[][]): void {
     // move up
     const isBreak = currentMinBreakPointWidth >= currentBarWidth;
     if (isBreak) {
@@ -134,7 +130,7 @@ class BottomBar extends Component<any, any> {
    * @returns {?React$Element} - component element
    * @memberof BottomBar
    */
-  public render(props: any) {
+  render(props: any) {
     const styleClass = [style.bottomBar];
     if (props.isCasting && props.isPlaybackEnded) {
       styleClass.push(style.hide);
@@ -145,7 +141,7 @@ class BottomBar extends Component<any, any> {
       <div className={styleClass.join(' ')}>
         <div className={style.bottomBarArea}>
           <PlayerArea shouldUpdate={true} name={'BottomBar'}>
-            {shouldRenderTimeDisplay && <TimeDisplayPlaybackContainer />}
+            {shouldRenderTimeDisplay && <TimeDisplayPlaybackContainer/>}
             {props.children}
           </PlayerArea>
         </div>
diff --git a/src/components/top-bar/_top-bar.scss b/src/components/top-bar/_top-bar.scss
index 9367ef8e8..0b7881ec1 100644
--- a/src/components/top-bar/_top-bar.scss
+++ b/src/components/top-bar/_top-bar.scss
@@ -1,4 +1,5 @@
 .player .top-bar {
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
   color: #fff;
   visibility: hidden;
   position: relative;
@@ -72,15 +73,6 @@
 .player.ad-break,
 .player.menu-active {
   &:not(.overlay-active) {
-    :global(.#{$video-filter}) {
-      &:before {
-        @include bottom-bar-gradient();
-
-        top: 0;
-        background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
-      }
-    }
-
     .top-bar {
       visibility: visible;
       margin-top: 0;
@@ -127,10 +119,3 @@
     }
   }
 }
-
-:global(.#{$video-filter}) {
-  &:before {
-    transition: #{$hover-animation-time}ms opacity ease-in-out;
-    opacity: 0;
-  }
-}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 8e3df0838..00711085f 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -27,7 +27,6 @@ $bottom-bar-bottom-gutter: 4;
 $gui-gutter: 16;
 $gui-small-gutter: 8;
 $blur: 16px;
-$video-filter: playkit-video-filter;
 // ***************  Backward Compatibility - Deprecated  **************
 $brand-color: #006bff; // - refs in playkit-ui and related-plugin
 $white: #ffffff; // - refs in playkit-ui and related-plugin
@@ -73,7 +72,6 @@ $new-live-color: #e12437; // - refs in related-plugin
   defaultTransitionTime: $default-transition-time;
   bottomBarMaxHeight: $bottom-bar-max-height;
   topBarMaxHeight: $top-bar-max-height;
-  videoFilter: $video-filter;
   // ***************  Backward Compatibility - Deprecated  **************
   brandColor: $brand-color;
   white: $white;