Coloured Chrome in Safari [how to]

I thought I'd share this little trick I came across to colour the chrome of Safari in Apples latest OS release.

As you may be aware Apple have introduced a translucent chrome for Yosemite that shows a highly blurred version of the site on scroll. With a little CSS trickery it's easy to use this effect to our advantage and colour it.

Just add this code snippet and a .safari-header div at the beginning of your site and bingo, coloured chrome!

CSS
.safari-header {
top: -100px;
width: 100%;
height: 100.1px;
position: fixed;
background: #color:
}