CSS Linear Gradients

On 4 minutes, 34 seconds read By Edward

Style pages using linear gradients

Apply linear gradients to backgrounds on your website. Modern browsers that support CSS3 will be able to view linear gradients. Gradients must have a minimum of two colours.

Linear gradients can go from left to right or top to bottom or displayed in specified angles.

In this tutorial, only two-colour gradients will be used .

    Tools are required:

  • Text editor for creating and modifying the page hits counter files.
  • Web server.
  • CSS.
  • HTML.
  • Knowledge of the files to be served.

Index.html file

<!--
        index.html

        Copyright 2011 Edward <http://ojambo.com/contact>

        This program is free software; you can redistribute it and/or modify
        it under the terms of the GNU General Public License as published by
        the Free Software Foundation; either version 2 of the License, or
        (at your option) any later version.
        
        This program is distributed in the hope that it will be useful,
        but WITHOUT ANY WARRANTY; without even the implied warranty of
        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
        GNU General Public License for more details.
        
        You should have received a copy of the GNU General Public License
        along with this program; if not, write to the Free Software
        Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
        MA 02110-1301, USA.
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com Linear Gradients Tutorial</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css"> 
		div#two-colours-from-left {
			height:50px;
			
			/* Non-CSS3 browsers */
			background: #999; 

			/* W3C Specification */
			linear-gradient([<bg-position> || <angle>,]? <color-stop>, <color-stop>[, <color-stop>]*);

			/* Webkit browsers */
			background: -webkit-gradient(linear, left top, right top, from(yellow), to(#000));

			/* Mozilla browsers */
			background: -moz-linear-gradient(left, yellow, #000);
		}
		div#two-colours-from-top {
			height:50px;
			
			/* Non-CSS3 browsers */
			background: #999; 

			/* W3C Specification */
			linear-gradient([<bg-position> || <angle>,]? <color-stop>, <color-stop>[, <color-stop>]*);

			/* Webkit browsers */
			background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#000));

			/* Mozilla browsers */
			background: -moz-linear-gradient(top, yellow, #000);
		}
		div#multiple-colours-angled {
			height:50px;
			
			/* Non-CSS3 browsers */
			background: #999; 

			/* W3C Specification */
			linear-gradient([<bg-position> || <angle>,]? <color-stop>, <color-stop>[, <color-stop>]*);

			/* Webkit browsers */
			background: -webkit-gradient(linear, left top, right bottom, color-stop(0, yellow), color-stop(0.45, #000), color-stop(1, red));

			/* Mozilla browsers */
			background: -moz-linear-gradient(-45deg, yellow, #000, red);
		}
	</style>
</head>

<body>
	<h1>Ojambo.com Linear Gradients Tutorial</h1>
	<p>Two colour stops from left to right</p>
	<div id="two-colours-from-left"></div>
	<p>Two colour stops from top to bottom</p>
	<div id="two-colours-from-top"></div>
		<p>Multiple colour stops angled</p>
	<div id="multiple-colours-angled"></div>
</body>

</html>

To generate a two colour gradient from left to right, a container called “two-colour-from-left” is used. All containers specify the height as 50px and have a default background for non-CSS3 browsers. For future references, the W3C specification is included. Currently only Webkit and Mozilla support the linear gradients using proprietary formats -webkit-gradient and -moz-linear-gradient respectively. For webkit browsers, definations are linear, left top to start and right top to stop, and the colours are defined with “from” and “to”. For mozilla browsers, left indicates the top left, and the first colour is defined automatically.

For gradients from top to bottom, webkit browsers require changing the stop position to left bottom from right top. Mozilla browsers require changing the first definition to top from left.

Angled example uses multiple colours in 45 degrees from top to bottom. For webkit, each colour stop must be identified as an angle such as “color-stop(0.45”. While mozilla the angle indicates where the linear gradient begins such as “-45deg”.

Example:

Two colour stops from left to right

Two colour stops from top to bottom

Multiple colour stops angled

    Recommendations:

  1. Put the styles is a separate css file.
  2. Please note, that this works only for mozilla and webkit browsers.
  3. In a future tutorial on radial gradients, solutions for all other browsers will be presented.