# Navbar linear gradient and button backgrounds **URL:** \ **Category:** uncategorized\ **Created:** [June 11, 2014, 11:15am UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503 "2014-06-11T11:15:30Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![t24745efnmb](https://avatars.discourse-cdn.com/v4/letter/t/f475e1/32.png) [@t24745efnmb](https://forum.ionicframework.com/u/t24745efnmb)\ **Post date:** [June 11, 2014, 11:15am UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/1 "2014-06-11T11:15:31Z")
Hi does anyone know how to achieve a navbar like this with Ionic? I can change the navbar background to a single color with scss but I need gradient and for buttons I need a background color like in the image below ![](https://sea1.discourse-cdn.com/ionicframework/uploads/default/951/b4aa4d01c870cb19.png) ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [June 11, 2014, 12:57pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/2 "2014-06-11T12:57:35Z")
You’ll need to use css gradients for that. > **[Ultimate CSS Gradient Generator from ColorZilla](http://www.colorzilla.com/gradient-editor/)** > > A powerful Photoshop-like CSS gradient editor ---
**Author:** ![t24745efnmb](https://avatars.discourse-cdn.com/v4/letter/t/f475e1/32.png) [@t24745efnmb](https://forum.ionicframework.com/u/t24745efnmb)\ **Post date:** [June 11, 2014, 1:09pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/3 "2014-06-11T13:09:28Z")
Yes I know. but where shall I assign it? And how can I modify those buttons so they have background like that? ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [June 11, 2014, 1:43pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/4 "2014-06-11T13:43:19Z")
You should use `button-clear` so there is no background on them. > **[Custom Loading Bar: 1.0.0-beta.6](https://codepen.io/mhartington/pen/pCBLn)** > > Example of custom Ionic loading indicator styled as a header bar. Forked from \[Ionic\](/ionic)'s Pen \[Custom Loading Bar: 1.0.0-beta.6\](/ionic/pen/pEte... ---
**Author:** ![t24745efnmb](https://avatars.discourse-cdn.com/v4/letter/t/f475e1/32.png) [@t24745efnmb](https://forum.ionicframework.com/u/t24745efnmb)\ **Post date:** [June 11, 2014, 3:00pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/5 "2014-06-11T15:00:31Z")
Thank you for the replies but there is still gradient background behind the buttons in that codepen you’ve sent. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [June 11, 2014, 3:28pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/6 "2014-06-11T15:28:43Z")
> [@t24745efnmb](#): > > [http://codepen.io/mhartington/pen/pCBLn](http://codepen.io/mhartington/pen/pCBLn) So you don’t want the gradient on the button?? The codepen has been updated with that. https://codepen.io/mhartington/embed/preview/pCBLn?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=pCBLn ---
**Author:** ![mrzkhd](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@mrzkhd](https://forum.ionicframework.com/u/mrzkhd)\ **Post date:** [August 24, 2014, 10:19am UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/7 "2014-08-24T10:19:49Z")
> [@mhartington](#): > > button-clear how we can set gradient color on header-bar? i did it by CSS style, but it don’t accept and in the device shows only one color, but in computer browser works correct. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [August 24, 2014, 11:04pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/8 "2014-08-24T23:04:38Z")
Are you trying this in ios or android? Can you remote inspect to see what lines of css aren’t being applied? ---
**Author:** ![mrzkhd](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@mrzkhd](https://forum.ionicframework.com/u/mrzkhd)\ **Post date:** [August 25, 2014, 4:25am UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/9 "2014-08-25T04:25:21Z")
@mhartington i’m working on ‘www’ folder. (not in the platform folder and not on the specified platform). in browser (windows 7 - firefox, chrome,…), it’s ok. but when i installed it on android and run it (via ionic run command) it show only one color! (android ver4.2) app run in device and i can’t debug it. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [August 25, 2014, 4:50pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/10 "2014-08-25T16:50:43Z")
Hmm got this too, on a 4.3 and below. So after some research, it seems that 4.3 and below only have partial support for gradients, so it will be hit-or-miss for support ---
**Author:** ![peterrobot](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/peterrobot/32/6991_2.png) [@peterrobot](https://forum.ionicframework.com/u/peterrobot)\ **Post date:** [January 17, 2015, 6:16pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/11 "2015-01-17T18:16:27Z")
I ran into this issue when I wanted to apply gradient on the navbar. It fails with a plain color. I think there’s a bug somewhere because the gradient works elsewhere within the ion-content. But once applied on the navbar, it gets replaced with a plain color that is just a mix of the two colors. I’ve tried to inspect and see where the css gets mixed up but have not been able to. I wish someone from ionic checks for us. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [January 17, 2015, 6:59pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/12 "2015-01-17T18:59:19Z")
I’m thinking the issue is due to the webview on older android devices. You may want to check out this. > **[Crosswalk Integration Beta in Ionic CLI (v1.3.2)](http://forum.ionicframework.com/t/crosswalk-integration-beta-in-ionic-cli-v1-3-2/15190)** > > The Ionic CLI has Crosswalk integration and we need some testers! Current Version of the CLI 1.3.2 Installing the CLI $ npm install -g ionic # or if your on osx $ sudo npm install -g ionic Note, you must have the necessary tools to build and... ---
**Author:** ![peterrobot](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/peterrobot/32/6991_2.png) [@peterrobot](https://forum.ionicframework.com/u/peterrobot)\ **Post date:** [January 18, 2015, 10:39pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/13 "2015-01-18T22:39:55Z")
It’s not a thing about the webview. There’s support for it. The gradient applies very well when withing But fails if applied to the header bar. I didn’t try footer bar though. But I believe there’s an overriding css somewhere, or something I can’t explain. It’s definitely not a support thing. The android webview supports it well. It’s simply failing when in a navbar or header bar. ---
**Author:** ![naveenkarippai1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveenkarippai1/32/91429_2.png) [@naveenkarippai1](https://forum.ionicframework.com/u/naveenkarippai1)\ **Post date:** [January 18, 2015, 10:47pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/14 "2015-01-18T22:47:34Z")
Hi @peterrobot, If there is overriding CSS styling, setting ‘!important’ flag should take care of that. Did you try Crosswalk build? ---
**Author:** ![peterrobot](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/peterrobot/32/6991_2.png) [@peterrobot](https://forum.ionicframework.com/u/peterrobot)\ **Post date:** [January 19, 2015, 12:19am UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/15 "2015-01-19T00:19:57Z")
I tried !important still no luck. I’ll share a screen from my app with details but for the mean time, I’ll ry Crosswalk and see. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [January 19, 2015, 8:07pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/16 "2015-01-19T20:07:55Z")
So I can confirm that issue is with the webview. I tried this on a vanilla cordova project and still had issues with the gradient rendering. It would always use the fallback background color. ---
**Author:** ![peterrobot](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/peterrobot/32/6991_2.png) [@peterrobot](https://forum.ionicframework.com/u/peterrobot)\ **Post date:** [February 10, 2015, 2:02pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/17 "2015-02-10T14:02:56Z")
I have tried crosswalk; the gradient issue was resolved, native “select” input renders well but I wasn’t really satisfied on the all. I just don’t know why. The generated apk is too large, scrolling is not as fluid, there are always some dots and lines on the screen during scrolls. The splash screen is white, …etc. I just had to reverse to the default webview and look for alternative ways around those issues encountered with the default webview, for now. I won’t like my users to be downloading a very big file during app upgrades. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [February 10, 2015, 8:55pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/18 "2015-02-10T20:55:50Z")
Well the splash screens have been fixed > **[Splashscreen on Android doesn't work (only showing white screen for 2 seconds)](http://forum.ionicframework.com/t/splashscreen-on-android-doesnt-work-only-showing-white-screen-for-2-seconds/15604/15?u=mhartington)** > > Well you missed a step @seanhill $ ionic start myapp tabs $ ionic plugin add org.apache.cordova.splashscreen $ ionic platform add android $ vi config.xml Just it hasn’t been published by the cordova team. As for the scrolling, can you give the nightly builds a try, we’ve android to use native-scrolling isntead of js scrolling. And again, for the file size, this should be fixed with the latest release of the cli, 1.3.10. ---
**Author:** ![m1nka](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/m1nka/32/96606_2.png) [@m1nka](https://forum.ionicframework.com/u/m1nka)\ **Post date:** [May 3, 2016, 12:12pm UTC](https://forum.ionicframework.com/t/navbar-linear-gradient-and-button-backgrounds/5503/19 "2016-05-03T12:12:23Z")
Just ran into the same problem (wanted gradient in header). After lots of try-and-error I came up with this, seems to be the easiest solution: ` ` css-class should have `width: fill;height: SOMETHINGpx;` and any gradient you want.