Published on Dec 10, 2019

Gradient Background Images

License Info: Creative Commons 4.0 BY-NC

Colors gradients add a lot of value to the GUI of a website. At present it is hard to find a website which doesn’t employ this technique. Gradients are generated using two techniques. These techniques are:

  • Gradients using images
  • Gradients using CSS3 code

We will analyze the pros and cons of the above two method one by one: –

  1.  Gradients using images

Until the advent of CSS3 the web developers used images for color gradients. In this method a thin image is generated using some photo editing software and then the image is repeated to get a large gradient. Photoshop is the most popular photo editing software used for this purpose. This method is still in use scarcely. This method has the following pros and cons:

(a) Pros


Since CSS3 is not supported by all the versions of browsers, the older versions of browsers may not show CSS3 gradient. However, image based gradient is supported by older versions of browsers. This method of gradient generation is likely to vanish as the latest and upcoming versions of all major browsers are supporting CSS3 and CSS3 based gradient generation is much easier and developer friendly than image based gradients.

(b) Cons

In this method, a thin gradient image is generated using a photo editing software and the image is repeated horizontally or vertically. Since the image can only be repeated in one direction, the length of gradient in the other direction cannot be changed.

2. Gradients using CSS3 code

This method is simple. All you need to do is to set the ‘background-image’ attribute to gradient. You can fill the entire background of a page element with gradient using this technique. The following are the pros and cons of this method: –

(a) Pros

The generated gradient is scalable to fit the entire width and height of the element. This property is the key factor which is making CSS based gradients more and more popular.

(b) Cons

CSS3 is not supported by older versions of browsers, so the CSS3 gradients will not show up there. However, there is a work around which avoids total ‘break’ of layout colors. This is done by adding ‘background-color’ property and giving this property the darker color of gradient. This property is added in CSS before adding CSS3 gradient code. This sequence enables the older browsers (not supporting CSS3) to show plain background color of the desired CSS3 gradient. Thus the code degrades but ‘gracefully’.

A WYSIWYG CSS Gradient Generator That Generates Photoshop Like Gradients Based on CSS3. It Provides The Corresponding Code on the Fly. Just Copy The Code and Use it. This CSS3 Gradient Generator Produces Code for All the Major Browsers.
Gradientoo is Also Available as an Addon From Mozilla.

Download free Gradient Background images gallery


Matched Content:

Related Images:

Leave a Comment