PHP, CSS, HTML and other web code stuff

CSS3 How To: Create Background Colours With Gradient Property

CSS3 How To: Create Background Colours With Gradient Property

The CSS3 gradient ability allows us to automatically create colour-gradient backgrounds for elements in a web page, without having to use image files.

Unfortunately this is not supported by Opera or Internet Explorer. There is a filter that you can use to create linear gradients in IE, but for Opera you will have to resort to a fallback background image.

Gradient Syntax

The gradient feature, rather than being a standalone property on its own, is a set of values that can be applied to the background, border-image and list-style-image properties. Each browser-specific extension has its own syntax, so for maximum support, here is what you need to create a vertical linear gradient:

.gradient {
    color: #fff;
    background: #aaa url(gradient_image.png) 0 0 x-repeat;
    background-image: -moz-linear-gradient(top, #000, #aaa);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(1, #aaa);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr='#000000', EndColorStr='#aaaaaa')";
    filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr='#000000', EndColorStr='#aaaaaa');

Gradient Tools

For some help creating gradients, there is a great tool called the Ultimate CSS Gradient Generator, which allows you to set up any gradient you wish, and then spits out the relevant CSS code for you.

This entry was posted in CSS, CSS3. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Hello

    My name is Vin. I'm a coder who is interested in discovering the best ways to do things on the web. With a little bit of thought, we can do lots of interesting things, and it often isn't nearly as hard as one might think.

    This site is my chance to share with you what I've learned.