DEMO linear gradient to bottom linear gradient hover box-shadow box-shadow with hover linear gradient to bottom right linear gradient hover box-shadow box-shadow with hover linear gradient to right linear gradient hover box-shadow box-shadow with hover As you can see above, using CSS box-shadow and background color can almost substitute the CSS linear gradient background-image. But, it's still rendered a bit differently on Chrome and Firefox. The transition of CSS gradient color value can't be animated (yet). Because it's an image : background-image property. The advantages of using box-shadow and background-color : You can animate the transition using CSS transition property. Box-shadow values can be put in series to create vivid shape - because of the different shadow color and position. Box-shadow and background-color can be rendered by most of (desktop and mobile) browsers WITHOUT using any prefix - reducing code lines ...