Tuesday, June 2nd, 2009

CSS Gradient Tool; Build the Apple Navigation Bar

Category: CSS, Utility

John Allsop has created a very cool CSS gradient exploration tool that lets you get the gradient you need, with the resulting sample and code right there.

You could use it to do what he did, and recreate the Apple navigation bar in pure CSS instead of using images.

John didn’t stop there, and has already created tools for Box Shadows Shadows and Radial Gradients.

Posted by Dion Almaer at 8:25 am

3.5 rating from 26 votes


Comments feed TrackBack URI

Looks great – I emailed the creator to see if he would also supply the equivalent SVG code to copy/paste.

Comment by codedread — June 2, 2009

Lol, that page scrolls about about 0.2 FPS in FF 3.5b4 with smooth scrolling. Screw fixed backgrounds.

Comment by Darkimmortal — June 2, 2009

Note that these gradients are also supported in Chrome (thanks, WebKit!).


Comment by slightlyoff — June 2, 2009

What I’m doing wrong?
Safari 4 beta does not display gradient, nevertheless http://tools.westciv.com/gradients/ shows me gradient…

Comment by Prudnikov — June 3, 2009

@prudnikov – you need to put that gradient stuff as the value of background-image

background-image:-webkit-gradient(linear, left top, left bottom, from(#17E1FF), to(#19ADC4), color-stop(.6,#19D1ED));

Comment by genericallyloud — June 4, 2009

very cool article and i know that so many designers searching for apple like design tutorials.

i had created a css navigation which inspired from apple’s dotted page navigation bars. it has a tooltip on hover and it’s a powerful code because no javascript, jquery or any image required to use it. you can check it on my blog:


Comment by kntl — November 10, 2009

Leave a comment

You must be logged in to post a comment.