css linear gradient effect for all browser

Question

I am new in stackoverflow. This is my first question. I am having an issue in css liner gradiant. I have this css:

.body-middle{
    float: left;
    margin-left: 1%;
    padding-left: 1%;
    padding-right: 1%;
    background: #fff;
    background: linear-gradient(180deg, transparent, #353535, transparent);

    background-position: 50%;
    background-repeat: repeat-y;
    background-size: 1px auto;
    height: 300px;
    width: 2%;

    background: -webkit-gradient(linear,180deg, transparent, #353535, transparent));
}

and this html:

<div class="body-middle"></div>

Currently it is perfectly working in firefox. It is not working in google chrome,safari and ie(also need to support in ie8).

fiddle link

Though your specific question is already answered just a hint - google for css gradient generator, then you'll find some links where you can easily generate css gradient for all browsers. — matthias_h, Aug 31 '14 at 14:52
possible duplicate of [Cross browser text gradient in pure css without using background image](http://stackoverflow.com/questions/8005447/cross-browser-text-gradient-in-pure-css-without-using-background-image) — CBroe, Aug 31 '14 at 15:19

anchor · Answer 1 · 2014-08-31T16:58:36.007

You can try something like this:

.box_gradient {
  background-color: #444444;
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:         linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera */
}

EDIT: Don't forget to give it a height and width to the div. Also you can see an example here:

http://www.w3schools.com/css/css3_gradients.asp

Go to "try it your self".

I think this will help you.

P.S. You can see the compatible versions of browsers too. IE9 and below does not support gradient!

Thanks but still it is just like a line no gradient in chrome — Shahriar Parvez, Aug 31 '14 at 15:02

score 0 · Answer 2 · answered Dec 17 '20 at 22:09

div {
width: 500px;
height: 200px;
margin: auto auto;
}
.gradient-1 {
      background: -moz-linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    background: -webkit-linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    background: linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#395175", endColorstr="#202f42", GradientType=1);
}
.gradient-2 {
      background: -moz-linear-gradient(45deg, red, green);
    background: -webkit-linear-gradient(45deg, red, green);
    background: linear-gradient(45deg,red, green);
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#00ff00", GradientType=1);
}

<div class="gradient-1"></div>
<div class="gradient-2"></div>

.gradient{
      background: -moz-linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    background: -webkit-linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    background: linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#395175", endColorstr="#202f42", GradientType=1);
}

<div class="gradient"></div>

css linear gradient effect for all browser

2 Answers2