Use of gradient images is very common among developers for styling a page. Gradient images are used in many places from styling the navigation bar to styling the background. Technique like repeating a small image in either direction is also common.
One more way to style and give this effect is by using multiple div’s one below another with different color, the latter being a little lighter than the former. In the most simple scenario doing so would include only a small script. So, no problem of writing a lot of markup, just some simple code.
The only concern that remains is speed and performance.
Speed
The script, more precisely the function would be much shorter in size than a image. So, in matters of speed the latter method seems more good.
Performance
Today’s browsers are very powerful, so the difference between displaying an image and executing a function is negligible.
Css management
Obviously, problems like positioning would be another concern but we do struggle with such problems in every day life. The problem is no greater than overlapping two div’s and setting their z-index. The whole gradient div’s can lie inside one parent div.
So having addressed the issues of performance and speed isn’t using Gradient div’s a much better approach than using images?
It’s an alternate approach, yes. But not a good one. You get zero points for:
Furthermore, to say that we needn’t worry about performance since today’s browsers are more powerful is a gross assumption.