LWD logoLori's Web DesignLWD logo

How to Design a Gradient Background Without Images Using CSS3

What is a CSS3 Gradient Background?

A gradient background, using CSS3, 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. If you prefer to use images see How to Design a Gradient Background in Photoshop

CSS3 Gradient Backgrounds Without Images

Using CSS3 to load a gradient helps the page to load faster than using background images. Since CSS3 was implemented, gradient backgrounds can be built without images in the following browsers: Safari4+, Chrome 1+, Firefox 3.6+ and Opera 11.10+ (a filter is used in IE being as it doesn't support gradients yet). Not all browsers support the same method so a different line of code needs to be used for each browser.

  1. Start with a fallback background color for non-gradient browsers
  2. Safari and Google's Chrome browsers support Webkit extension
  3. Mozilla's Firefox supports mox-linear-gradient extension
  4. Opera has it's own extension -o-linear-gradient
  5. You have to use a filter for Internet Explorer (IE) 5.5 - 7
  6. Use a ms-filter for IE 8-9
  7. Use a ms-linear-gradient extension for IE 10
  8. Also add a style for fully compliant browsers on the end

Design a Vertical Linear Gradient (from Top to Bottom)


A vertical gradient background

.gradient-vert {
      background:#0195FA;
      background: -webkit-gradient(linear, left top, left bottom, from(#013567), to(#0196FA));
      background: -moz-linear-gradient(top, #013567, #0196FA);
      background: -o-linear-gradient(top, #013567, #0196FA);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#013567, endColorstr=#0196FA);
      -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#013567,
            endColorstr=#0196FA);
      -ms-linear-gradient(left, #013567, 0%, #0196FA 100%);
        background: linear-gradient(left, #013567 0%, #0195FA 100%);

Copy the above 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 colors, 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>

The above vertical gradient was set up using a dark blue (#013567) for the top side and a light blue (#0195FA) for bottom side.

To change the colors for your own color scheme you need to use a color picking tool that will give you the color numbers for various graduations of color. Just click on your preferred color or enter a color number in the "Pick a color" box then choose different shades of that color.

The default fora gradient is going from top to bottom so you don't even need to add "top" unless you want. You can also set up a linear gradient going from left to right or horizontal by changing the above code to read "left top, right top," instead of "left top, right bottom" as shown below:

Design a Horizontal Linear Gradient (from Left to Right)


A horizontal gradient background

.gradient-horiz {
      background:#0195FA;
      background: -webkit-gradient(linear, left top, right top, from(#013567), to(#0196FA), color-stop(0.7,
            #0196FA));
      background: -moz-linear-gradient(left top, #013567, #0196FA 70%);
      background: -o-linear-gradient(left top, #013567, #0196FA 70%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#013567,
            endColorStr=#0196FA, GradientType=1);
      -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#013567,
            endColorstr=#0196FA, GradientType=1);
        background: linear-gradient(left top, #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>

If you want to use a gradient 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.

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


Google


Return to CSS Tips


Lori Eldridge
Lori's Web Design
Copyright © 2004 - Updated 4-12-13
All Rights Reserved.

Twitter     Google+     Facebook     linked in