Thank you so much for taking your time to read this.
Heres the code the colorzilla gradient generator created for me:
background: #aecc9f;
background: -moz-linear-gradient(top, #aecc9f 0%, #97b78d 50%, #9bb78d 52%, #8faa83 100%);
background: -webkit-linear-gradient(top, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
**background**: linear-gradient(to bottom, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 );
Next to the line of the bolded background text, I get the following error:
Expected (<filter-function-list> | none) but found 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 )'
I hope someone will be kind enough to help a programming idiot such as myself.
Line
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 );
is incorrect, according to definition of filter property (1, 2), it can take following values:
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url() - for applying SVG filters
custom() - "coming soon"
None of them are responsible for gradient, so you can just remove this line from your code.
Also I don't know what is the purpose of double asterisks around **background**, but them break css code, so you probably should remove them too, and it will be like this:
.gradient {
background: #aecc9f;
background: -moz-linear-gradient(top, #aecc9f 0%, #97b78d 50%, #9bb78d 52%, #8faa83 100%);
background: -webkit-linear-gradient(top, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
background: linear-gradient(to bottom, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
}
.wide {
width: 100%;
height: 100px;
}
<div class="wide gradient">
</div>
While using a CSS black to transparent linear-gradient I noticed that it doesn't gradually fade to transparent, instead it makes the grey area linger longer and only near the end it becomes transparent with a noticeable limit.
After noticing this I decided to use a photoshop gradient with the exact properties and it looked better, the gradient was changing from black to transparent smoothly and linearly.
The following contains an example showing a CSS linear-gradient on the left and Photoshop generated gradient on the right - Both were created with the exact same properties:
#css, #ps{
height:100px;
width:50%;
}
#css{
float:left;
background:linear-gradient(black, transparent);
}
#ps{
float:right;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAMAAABw8qpSAAABLFBMVEUCAgIDAwMEBQUGBgYICAgJCQkLCwsNDQ0PDw8RERETExMVFRUXFxcZGRkbGxsdHh4gICAiIiIkJSUnJycpKiosLCwvLy8xMjI0NDQ3Nzc5Ojo8PDw/Pz9CQkJFRUVISEhLS0tOTk5RUVFUVFRXV1daWlpdXV1gYGBjY2NmZmZpamptbW1wcHBzc3N2dnZ5eXl8fX2AgICDg4OGhoaJiYmMjIyQkJCTk5OWlpaZmZmcnJyfn5+ioqKlpqaoqamrrKyvr6+ysrK0tbW3uLi6urq9vb3AwMDDw8PGxsbJycnLy8vOzs7R0dHT09PW1tbY2Njb29vd3d3g4ODi4uLk5OTm5ubp6enr6+vt7e3v7+/x8fHy8vL09PT29vb4+Pj5+fn7+/v8/Pz+/v4AAAE6GCMnAAAAY3RSTlP+/Pv5+Pb08vHv7evp5uTi4N3b2NbT0c7LyMbDwL26t7SxrquopaKfnJmWk4+MiYaDgHx5dnNwbGlmY2BdWldUUU5LSEVCPzw5NzQxLiwpJyQiHx0bGRYUEhAODQsJBwYEAwEIFXNRAAAAEElEQVQIHWNJZpnLwjj0IQCJ8QLzQI0QnQAAAABJRU5ErkJggg==");
}
<div id="css"></div>
<div id="ps"></div>
As you can see the difference is clearly visible. Is it possible to replicate Photoshop's real linear-gradient into CSS's or my only option is to use base64/png tricks to achieve an actual linear gradient?
Because currently css's linear-gradient is everything but linear, in fact from what I can see it creates an easeInOut-gradient instead of linear.
As GRC says, you can set multiple midpoints values to adapt the gradient to your exact needs
A good starting point is colorzilla, where you can import an image file and get an automated result.
For your image, the result is:
.test {
height: 100px;
background: #020202; /* Old browsers */
background: -moz-linear-gradient(top, #020202 0%, #1f1f1f 9%, #434343 18%, #989898 38%, #b2b2b2 45%, #d1d1d1 56%, #e9e9e9 67%, #f2f2f2 73%, #f9f9f9 80%, #fdfdfd 87%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#020202), color-stop(9%,#1f1f1f), color-stop(18%,#434343), color-stop(38%,#989898), color-stop(45%,#b2b2b2), color-stop(56%,#d1d1d1), color-stop(67%,#e9e9e9), color-stop(73%,#f2f2f2), color-stop(80%,#f9f9f9), color-stop(87%,#fdfdfd), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020202', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
<div class="test"></div>
The problem is that this tool gives only rgb values, you will need to manually convert those to rgba, and play with the alpha values.
You can do following:
background:linear-gradient(black, transparent, transparent);
or
background:linear-gradient(black 10%, transparent);
10% of space is taken by black.
Hope this helps.
I'm testing my application on Firefox 33. I have a simple background property defined with a gradient:
background: linear-gradient(bottom, #004771 0%, #005185 100%);
and it doesn't work. CanIUse reports that gradients on Firefox 33 can be used without a prefix. So why doesn't it work? If I add a Mozilla-specific prefix:
background: -moz-linear-gradient(bottom, #004771 0%, #005185 100%);
everything works OK.
When using linear-gradient without the prefix, you need to write it like this ("to bottom" instead of "bottom"):
background: linear-gradient(to bottom, #004771 0%, #005185 100%);
EDIT: Link to documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Syntax
You need to use to bottom in order for it to work:
background: linear-gradient(to bottom, #004771 0%, #005185 100%);
jsfiddle
What will be the cross-browser CSS for the following linear-gradient style ?
background: linear-gradient(bottom, #E4E8EA 0%, #E8EBED 50%, #f1f3f4 96.36%, #fff 100%);
you need to use
-moz-linear-gradient() /*mozilla*/
or
-webkit-linear-gradient() /*safari,chrome*/
or
-ms-linear-gradient() /*IE*/
or
-o-linear-gradient() /*opera*/
alongside in your style
I have this linear gradient, and I can't figure out why it doesn't "work".
It is supposed to start in light gray and end in with, but about 80% in, it goes all white, with a notable white line. Can anyone see what is wrong?
My CSS is here:
background: white -webkit-linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
background: white linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
Thanks
Edit: I'm using chrome to test the gradient...
You set the default color white, use transparent...
background: transparent -webkit-linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
background: transparent linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
#JPuge Take a look here to make easy the CSS Gradients http://www.colorzilla.com/gradient-editor/