Pages

Tuesday, February 7, 2012

How to create a CSS Gradient Background without using an Image



The One thing that is nice is that we now have the ability to create gradients in CSS itself without having to use an image.
Use of gradient colors is not only common in images but also lots of Website use this technique to improve their layout design. Although it is a normal practice to use images as  background of a Webpage but we can also combine two colors in CSS to make gradient color look without using an image.
With the help of gradient coloring we can make our website look more beautiful. There is not a particular CSS property that allows to make gradient color that display in all commonly used browsers. But there are some specific moz and webkit CSS property that allow us to make a gradient color and also we can cover internet explorer browser by using using its filter property. Below we provided a code example of creating a background gradient color without any image. You can put the color values according to your design.

  
body{
background: #008800;background: -moz-linear-gradient(top, #358F41 #EF3B64);background: -webkit-gradient(linear,  left top, left bottom, from(#358F41), to(#EF3B64);filter: progid:DXImageTransform.Microsoft.Gradient(  StartColorStr='#358F41', EndColorStr='#EF3B64', GradientType=0);
}

3 comments:

  1. Hi,
    I tested it and it worked beautifully in IE. It was really cool to see! But in Chrome the background was white, in Firefox it was solid green, and in Safari it was white. So, for me, I will stick with images repeated until this can get be the same on all browsers. Very cool though. -Ann

    ReplyDelete
  2. Cross browser support would be nice. Great post and good work!

    ReplyDelete
  3. thanks alot guys....its still unsupported in IE, However i have used filter tag for that....hope you guys find good stuff here..:)

    ReplyDelete