How to make a CSS Gradient Background Without 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 a background of a web page but we can also combine two colors to make gradient color look without 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.
1 2 3 4 5 6 7 8 9 10 11 12
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);
}
Related posts
- How to Use Firebug for CSS
- How to Create a Search Engine Friendly Website
- How to Decorate Text With CSS
- How to Create Text Shadow With CSS
- How to Place an Image over Div Border
- How to Create a Zebra Striping Table with CSS
- How to Create CSS Dynamically
- How to Change default Cursor with CSS
- How to Play Audio on Hover State
- How to Create a Grid with CSS
No Response
Post your response