Linear gradients are popular and add a little extra fanciness to a solid background color. But this tool can also be used to control where the background color will begin and end.
One of the largest automotive groups wanted a new design for their product that would be used across all their dealerships, so this had to look perfect. On this page, the background color is solid, but the image bleeds over the top and bottom. Instead of manipulating the image, we can use a linear gradient, so the background color matches the background, then a hard transition to our gradient color, then a hard transition back to match the background.
In the screenshot below, the green rectangle shows the actual boundaries of the <div> container. The top and bottom sections match the background giving the appearance that our image is bleeding over the edges.
Tools: HTML5, CSS3.
PS- If you wanna have some fun, you can even make a rainbow!
