How to Create a Gradient Background with CSS

A gradient background, using CSS 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 with Images in Adobe Photoshop

CSS Linear Gradient Backgrounds Without Images

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.

How to Design a Vertical Linear Gradient (from Top to Bottom)

The following background 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 linear gradient 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 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.

How to 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 "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 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.

Websites with Other Gradient Options

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


Lori's Web Design
Copyright © 2004 - Updated 1-17-19
All Rights Reserved.