This does not work in Firefox 22:
background-image: -moz-radial-gradient(48% -42%, 138px 138px, green 0%, lightblue 100%);
But it works in Chrome:
background-image: -webkit-radial-gradient(48% -42%, 138px 138px, green 0%, lightblue 100%);
It's the second argument Firefox has a problem with. If changed to
background-image: -moz-radial-gradient(center, ellipse cover, #008000 0%, #add8e6 100%); /* FF3.6+ */
it works in FF, but that was not really the effect I'm after!
jsbin with example
I think it's Mozilla bug. It doesn't support defined size radial gradient.
SEE
Related
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
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/
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.
I have some link buttons that I'm using CSS3 gradient code that I generated from Ultimate CSS Gradient Generator. It is working great except for IE7-9 (not worrying about IE6). Instead of the nice mid-gray to dark gray it is showing a blue to black gradient. The code being used is:
background: #666666; /* Old browsers */
background: -moz-linear-gradient(top, #666666 0%, #141414 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#141414 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#141414 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #666666 0%,#141414 100%); /* W3C */
To see what it is rendering like: http://bradmccullough.com.w.jaijaz.co.nz/
I have noticed that altering the display css element changes it but can't put my finger on what exactly is going on.
Thanks.
It is because you are using the shorthand color for gray in your CSS. Make sure you use #666666. Looking at the source of the stylesheet, for the IE filter, you're using #666 (although in your post above you have it right).
We had a similar problem recently. We identified that running CSS minify on the CSS files would shorten '#666666' to '#666', resulting in IE8 not being able to render the correct colour value within the 'filter' property. The only alternative was to define the colour as 'white' (our problem was with '#ffffff') or tweaking the colour slightly, i.e. '#fffffe' to prevent it from being written in shorthand.