Using CSS Background-Color and Box-Shadow to Substitute Linear-Gradient for Small Object

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 - so you can have more compact CSS.
  Check out Can I Use to see the usage statistic and current browser support for gradients, box-shadow, and transition.

---

The disadvantages :

• Well, it doesn't 100% look like CSS linear gradient.
• If you use too many values for box-shadow (like more than 10 values), and then using transition for those, it's gonna be very heavy for visitors to actually see the element in action. You still need to simplify the property by implementing other CSS property.

---

For your information, I implemented this to small-medium element, 200px and below.
Based on many experiments I had visited on the internet, color gradient (value of background-image) is powerful for creating larger canvas - creating background without any image. This background-image property is controllable, especially on positioning, repeat-x or -y, and size. And then, of course, the content of the background : gradient color - linear, circular, elliptical (angled) - or using external image (URL).

So, I think it's more of the art side of CSS - coloring and shaping. As you all know, art doesn't necessarily have to be efficient. But on the other hand, engineering needs the efficiency - for webpage loading, directly related to HTML size. By using this (substitutes gradients with box-shadow and background-color), we can, at least, compromise both areas. Especially for creating icons, narrow bar, and other small-medium sized elements.

---

Download this demo (txt file).