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/
Related
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
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
I would like to know if it's possible to generate a mask of saturation+brightness that are used in color pickers for instance (something like http://johndyer.name/lab/colorpicker/refresh_web/colorpicker/images/map-hue.png) but using only linear-gradient in css3 ?
I tried severals things, such as :
background: linear-gradient(to right, hsla(0,100%,0,0) 0%, hsla(0,0%,0%,.5) 100%), /* saturation mask */
linear-gradient(to top, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%), /* lightness mask */
but I can't make something like the picture, can't find the right combinaison, and because I don't fully understand, I don't know if it's possible.
Thanks
It is maybe the way you write it.
for the image, 1 gradient + a background-color will do.
you did not close correctly you rules , one value is still expected 100%) , /* li
:)
this could be it :
ele {
background:
linear-gradient(0deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat left ,
white linear-gradient(180deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat right;
background-size:95% 100%, 5% 100%;
}
http://codepen.io/anon/pen/ubDsr (gradient covers body)
You had your gradients reversed and some incorrect hsla values.
Just use hex notation, it's easier in this case:
background-image:
linear-gradient(to top, #000 0%, transparent 100%), /* lightness*/
linear-gradient(to right, #fff 0%, transparent 100%); /* saturation */
Here's a demo where you can compare the result with an image-based solution (normal = gradients, hover = Bootstrap Colorpicker).