LWD logoLori's Web DesignLWD logo

How to Create a Linear Gradient Background with CSS3 and Without Images

What is a CSS3 Gradient Background?

A gradient background, using CSS3 color values, is made by arranging similar colors from lightest to darkest or visa-versa, without using images. It is often used as the background for a web page, under a menu, or within boxes. Gradient backgrounds used to be made with images but they increased download time and do not display well when the page is zoomed. However, if you prefer to use gradient images see How to Design a Gradient Background in Adobe Photoshop

CSS3 Linear Gradient Backgrounds Without Images

Using CSS color values to load a background gradient helps the page to load faster than using background images. As of the date of writing this article, linear gradient backgrounds can be built without images in the following browsers: Safari 6.1+, Chrome 26+, IE 10.0+, Firefox 16+ and Opera 12.1+. Not all browsers use the came coding so a separate line for each is needed.

Design a Vertical Linear Gradient (from Top to Bottom)

The following background example starts with dark blue (#013567) for the top and a lighter blue (#0195FA) on the bottom (color stops). You can use color names instead of color values if you prefer. The default syntax for a vertical linear gradient goes from top to bottom so you don't need to add "top" unless you want.


A vertical gradient background

.gradient-vert {
      background:#0195FA; /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(#013567, #0196FA); /* For Safari 5.1 to 6.0 */
      background: -moz-linear-gradient(#013567, #0196FA); /* For Firefox 3.6 to 15 */
      background: -o-linear-gradient(#013567, #0196FA); /* For Opera 11.1 to 12.0 */
      background: linear-gradient(#013567, #0195FA); /*standard syntax */

Copy the above linear gradient code into your css file and then set up the following html in your web page where you want the box to show up (change the color stops, font size, margins, width & height, etc., to match your website):

<div class="gradient-vert" style="width:200px; margin:5px auto 5px auto; text-align:center; color:#CCCCFF; height:80px;font-size:18px;"> Add your content here </div>

To change the colors for your own color scheme you can use the WC3's HTML Color Picker Tool that will give you the color value numbers for various graduations of color. Just click on your preferred color value or enter a color value number then choose different shades of that color.

Design a Horizontal Linear Gradient (from Left to Right)


A horizontal gradient background

You can also set up a linear gradient going from left to right, or horizontal, by changing the above code to read "left" or "right" as shown below:

.gradient-vert {
      background:#0195FA; /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(left, #013567, #0196FA); /* For Safari 5.1 to 6.0 */
      background: -moz-linear-gradient(right, #013567, #0196FA); /* For Firefox 3.6 to 15 */
      background: -o-linear-gradient(right, #013567, #0196FA); /* For Opera 11.1 to 12.0 */
      background: linear-gradient(right, #013567, #0195FA); /*standard syntax */

Copy the code above into your css file and then set up the following in your web page (change the colors, font size, margins, width & height, etc., to match your own color scheme):

<div class="gradient-horiz" style="width:200px; margin:5px auto 5px auto; text-align:center; color:#CCCCFF; height:80px;font-size:18px;"> Add your content here </div>

Other Background Options

If you want to use a image with a plain colored background see Adding 2 backgrounds to 1 page with CSS

Gradient Backgrounds designed with CSS only work in the newer browsers so if your audience is more likely to view your site on older computers with older browsers you may want to Design a Gradient Background in Photoshop with Images.

If you prefer to not use a gradient background
see the Background Textures page for free texture images.

For instructions on how to make diagonal linear gradients, radial gradients and gradients with multiple color stops, see W3C's CSS3 Gradients.


Google


Return to CSS Tips


Lori Eldridge
Lori's Web Design
Copyright © 2004 - Updated 9-04-17
All Rights Reserved.

Twitter     Google+     Facebook     linked in