How to Design a Gradient Background with CSS

A gradient background, using CSS color values, is made by arranging similar color codes 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 or divs.

Gradient backgrounds used to be made with images but they increased download time and do not display well when the page is zoomed.

A horizontal gradient background

A vertical gradient background

Using CSS color values to load a background gradient helps the page to load faster than using background images. All modern browsers now support CSS3 without having to use "webkit, moz, etc", however you now need to include "to" in front of "left", "right", etc. within the gradient code.

How to Design a Vertical Gradient Background

A vertical gradient background, using CSS color values, is made by arranging similar color codes from lightest to darkest or visa-versa. The following background gradient example starts with dark blue (#013567) for the bottom and a lighter blue (#0195FA) on the top (these are called "color stops"). You can use color names instead of color values if you prefer. The default syntax for a vertical gradient background goes from top to bottom so you don't need to add "to top" unless you want.

A vertical gradient background

.gradient-vert {
background: linear-gradient(to top, #013567 0%, #0195FA 100%); }

Copy the above vertical gradient background code into your css file and then set up the following html in your web page where you want the gradient 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.

How to Design a Horizontal Gradient Background

A horizontal gradient background

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

.gradient-horiz {
background: linear-gradient(to right, #013567, #0195FA 70%); }

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 Gradient Background Options

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

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

Other Websites with CSS Background Gradient Tips

If you prefer to use gradient images with background see How to Design a Gradient Background with Images in Adobe Photoshop

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

Also see CSS Gradients on CSS Tricks which also lists browsers that support CSS3 gradients.

Return to CSS Tips