Cross-browser linear gradient - css

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

Related

CSS error from generated gradient linear gradient from colorzilla editor

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>

CSS linear gradient doesn't look like Photoshop's, can it be fixed?

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.

Why doesn't my linear-gradient work in Firefox?

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

How do I overlay a gradient background over an existing background with CSS?

I am trying to overlay a white-black linear gradient to an existing image. I have it set up like below; however, only the gradient layer is showing. Can someone point out where I went wrong?
JS Fiddle: http://jsfiddle.net/6nJJD/
HTML
<div>hello</div>
CSS
div {
background:linear-gradient(to bottom, #ffffff 0%, #000000 100%), url("http://us.123rf.com/400wm/400/400/adroach/adroach1210/adroach121000001/15602757-flower-and-bird-ornaments-retro-tile-repeat-as-many-times-as-you-like.jpg") repeat #eae7de;
color:#544a46;
font:62.5%/1.6 Helvetica, Arial, Sans-serif;
height:500px;
width:500px
}
try to change your gradient colours using RGBA values
background:
linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(0,0,0, 1) 100%),
url(...);
Example fiddle: http://jsfiddle.net/J7bUd/
Try also changing rgba(255,255,255, 0) with transparent: the result is slightly different but probably it's exactly what you're trying to achieve
You can accomplish this using RGBA in the gradient.
http://jsfiddle.net/6nJJD/3/
CSS:
linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)
You can modify the "0.65" value to attain the desired transparancy.
For Creating More Gradients as you like you can visit Ultimate Css
Gradient Generator
Hope This HElps
like this?
http://jsfiddle.net/6nJJD/2/
linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, #000000 100%)

Customizing a Firefox/Chrome Stylesheet for IE

I have a Firefox stylesheet and a chrome/safari stylesheet for a website. Now the problem is that IE does not pick up those styles(since they are not your typical general styles). I would like to know if there is an easy way of changing each of those properties to be able to work with IE. There are some styles/properties I will be able to change for IE, but I do not know the IE equivalent for some of them. Here is an example of the Firefox styles used in the Firefox stylesheet:
#topbar.black {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, #858585 0%, #636363 3%, #202020 50%, black
51%, black 97%, #262626 100%);
}
#topbar.transparent {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, rgba(133,133,133,0.7) 0%,
rgba(99,99,99,0.7) 3%, rgba(32,32,32,0.7) 50%, rgba(0,0,0,0.7) 51%, rgba(0,0,0,0.7)
97%, rgba(38,38,38,0.7) 100%);
}
#topbar {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, #cdd5df 0%, #b0bccd 3%, #889bb3 50%,
#8195af 51%, #6d84a2 97%, #2d3642 100%);
}
.pageitem {/* Converted 1 border radius*/
-moz-border-radius: 8px;
}
#tributton, #duobutton {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, #cdd4d9 0%, #c0c9cf 3%, #abb7bf 97%,
#81929f 100%);
}
For IE 9+ you can use .pageitem {border-radius: 8px}, because it is CSS3 standart.
For gradients you can use this CSS hack for IE: #topbar {filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cdd5df', endColorstr='#b0bccd');}
Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
See here for more details.

Resources