Background gradients

If you've dealt with background-gradients for any length of time, you'll know there was a time of madness where we needed to write gazillions of different syntaxes in the CSS to ensure cross-browser compatibility. Thankfully, Compass lets us write one mixin with a single syntax and it produces all the necessary CSS to make browsers happy. Let's use this to spruce up the main header area. Currently we have a solid background color and a border below. Let's remove this and instead use a single background gradient and box shadow. Here are the two mixins being used:

@include background(linear-gradient(to bottom, darken($color-pink, 10%) 0px, darken($color-pink, 10%) 4px, lighten(complement($color-pink), 10%) 4px,  complement($color-pink) 100%));
@include box-shadow(#ccc 0px 3px 10px);

Here is how that looks in the browser:

Background linear-gradient syntax

I'm aware that with all the color functions in that prior chunk of code, the background mixin syntax looks a little crazy...