Click here to Skip to main content
14,304,285 members

Designing Linear Gradient Backgrounds With CSS

Rate this:
3.67 (5 votes)
Please Sign up or sign in to vote.
3.67 (5 votes)
22 Jul 2015CPOL
Let's play around a little with color transition effects and find out the nitty-gritty of designing gradient backgrounds with CSS3.

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. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

jack dson
Web Developer
Canada Canada
A passionate freelance blogger and internet marketing expert, Jack Danielson has more than 3 years of experience as a marketing guru, social media expert and search engine optimization consultant. Besides inspiring small-to-large corporations in realizing their business potential, Jack thoroughly enjoys the challenges associated with starting a blog and enhancing its organic traffic by means of search engine optimization.

Comments and Discussions

 
Generalwell written and simple to understand, would have been superb if there were images! Pin
Olivia Young22-Jul-15 22:19
memberOlivia Young22-Jul-15 22:19 
GeneralSimilar article posted in 2011 Pin
DrABELL22-Jul-15 12:48
professionalDrABELL22-Jul-15 12:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Tip/Trick
Posted 22 Jul 2015

Tagged as

Stats

9.4K views
9 bookmarked