Designing Linear Gradient Backgrounds With CSS

Introduction

Today, gradient backgrounds are considered to be an integral design element to enhance the elegance of a website. Traditionally, web designers have been utilizing background images for establishing the gradient feel. However, relying on background images for creating gradient effect is now a thing of the past. Most of the modern-day web browsers have the ability to showcase gradient backgrounds designed with the help of CSS3.

Gradient is nothing but the gradual transition between a range of color schemes. It is a great feature introduced with the advent of CSS3, which makes it possible to display smooth color transition effects on your website. Besides improving the page loading speed, usage of CSS3 gradients can help you save significant amount of bandwidth by reducing the overall size of the requested web pages. 

Let's play around a little with color transition effects and find out the nitty-gritty of designing gradient backgrounds with CSS3.

Designing CSS3 Gradients

CSS3 mainly supports two types of gradient backgrounds. The first one is  Linear Gradient, while the other is known as Radial Gradient. In this tip, we will be concentrating on learning the first type of gradients - i.e., CSS3 Linear Gradients.

Linear Gradients in CSS3

Linear gradient allows you to set a starting point and a direction for showing gradual transition between two or more colors in a straight line. Linear gradient backgrounds are implemented using the 'linear-gradient()' function within the 'background' or 'background-image' property. 

Browser Supported Vendor Prefix

As CSS Gradients are browser dependent effects, we need to specify browser vendor prefixes for correctly displaying the intended effects on various web browsers. While Google Chrome and Safari support '-webkit' vendor prefix, Firefox and Opera have their own '-moz' and '-o' prefixes to support this feature. For Internet Explorer, we can make use of the '-ms' vendor prefix.

Linear Gradient Syntax

The basic CSS syntax for creating Linear Gradient is:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

where 'direction' specifies the movement of transition effect and color-stops are used to identify the combination of colors. The default direction, if not specified, is from the top to the bottom of an element.

Linear Gradient from Top to Bottom

In order to create a linear gradient background from top to bottom transition, with two colors, (for example 'red' and blue'), the CSS code will be:

background: linear-gradient(red, blue);

In order to integrate browser support for Chrome, Firefox and Opera, you need to use the below given code:

#gradient {
  background: -webkit-linear-gradient(red , blue); /* For Chrome*/
  background: -moz-linear-gradient(red, blue); /* For Firefox*/
  background: -o-linear-gradient(red, blue); /* For Opera*/
  background: linear-gradient(red , blue); /* Standard Syntax */
}

Linear Gradient from Left to Right

Note that we didn't explicitly mentioned the direction in the previous example. However, if you don't wish to use the default top to bottom transition and instead would like to have the transition effect from left to right, then you need to use the following code snippet:

background: linear-gradient(to right, red, blue);

So the complete code snippet with vendor prefix support for Chrome, Firefox and Opera browsers would look like:

#gradient {
  background: -webkit-linear-gradient(left, red , blue); /* For Chrome*/
  background: -moz-linear-gradient(right, red, blue); /* For Firefox*/
  background: -o-linear-gradient(right, red, blue); /* For Opera*/
  background: linear-gradient(to right, red , blue); /* Standard Syntax */
}

Linear Gradient - Diagonal

For designing a gradient that starts at the top left corner and goes to the bottom right, you can use the below code:

background: linear-gradient(to bottom right, red , blue);

CSS Code with browser support for Chrome, Firefox and Opera:

#gradient {
  background: -webkit-linear-gradient(left top, red , blue); /* For Chrome*/
  background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox*/
  background: -o-linear-gradient(bottom right, red, blue); /* For Opera*/
  background: linear-gradient(to bottom right, red , blue); /* Standard Syntax */
}

Linear Gradient - Using Angles

Another way to specify linear gradients is by using angles. It would provide you more control over the direction of the gradient background. The value is specified as an angle between a horizontal line and the gradient line, going in a counter-clockwise direction.

Here's an example to show the use of angles in defining linear gradients:

background: linear-gradient(60deg, red, blue);

And here's the same example with browser specific vendor prefixes:

#gradient {
  background: -webkit-linear-gradient(60deg, red , blue); /* For Chrome*/
  background: -moz-linear-gradient(60deg, red, blue); /* For Firefox*/
  background: -o-linear-gradient(60deg, red, blue); /* For Opera*/
  background: linear-gradient(60deg, red , blue); /* Standard Syntax */
}

Conclusion

While gradient backgrounds can add to the visual appeal of your website, it's important to remember that not all available browsers support this concept. For the browsers that don't support CSS gradients, ensure that you are always defining a default solid color background.

So blend your imagination with the concept explained above to design powerful CSS3 gradient backgrounds for your website with minimal effort.