Smooth CSS gradients - css

I'm learning how to use CSS gradients.
My problem is with top to bottom gradients. You can just see the "stops" in the color changing.
This is my CSS code
#header {
width:1000px;
height:250px;
background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599);
background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599);
}
Is there a way to smooth out the stops in top to bottom gradients? (this, to my eye, isn't very visible in left to right or right to left gradients)

The main cause of this bending effect is actually the linear blending of colors, which is not as harmonious to the human eye.
Andreas Larsen has written a pretty elaborate article on css-tricks.com (2017).
https://css-tricks.com/easing-linear-gradients/
It describes a concept of non-linear gradients by defining multiple color stops approximating a clothoid curve.
Would result in something like this (.gradient-clothoid):
.gradient-wrp {
display: flex;
}
.header {
width: 100%;
height: 250px;
flex: 0 0 none;
}
.gradient-linear {
background-image: linear-gradient(#bf7a30 30%, #edd599);
}
.gradient-smooth {
background-image: linear-gradient(#bf7a30 25%, 75%, #edd599);
}
.gradient-clothoid {
background-image: linear-gradient(
rgba(191, 122, 48, 1) 0%,
rgba(191, 122, 48, 0.3) 50%,
rgba(191, 122, 48, 0.15) 65%,
rgba(191, 122, 48, 0.075) 75.5%,
rgba(191, 122, 48, 0.037) 82.85%,
rgba(191, 122, 48, 0.019) 88%,
rgba(191, 122, 48, 0) 100%
);
}
<div class="gradient-wrp">
<div class="header gradient-linear"></div>
<div class="header gradient-smooth"></div>
<div class="header gradient-clothoid"></div>
</div>
This concept is also known as "scrim".
IMHO not so well suited for "starting" color stops like the original example:
the top 30% of gradient should have 100% color intensity. Probably to ensure better text readability for a heading
the remaining 70% should have a smooth color transition.
I actually prefer Amelia Bellamy-Royds’ proposal (article down below in the comments) using a (well supported) gradient smoothing by adding stop without color definition like so:
.gradient-smooth{
background-image:linear-gradient(#BF7A30 25%, 75%, #EDD599);
}
This will smooth the gradient between 25% and 75% to the bottom spline based and not linear.
.gradient-linear{
background-image:linear-gradient(#BF7A30 30%, #EDD599);
}

As #nighthawk2534 mentioned, adding more colors to the gradient is the way to go. Obviously, those have to be "right" colors.
I don't know color theory enough, but stumbled upon a great tool for that:
https://mycolor.space/gradient
For your example it gives:
background-image: linear-gradient(to right top, #bf7a30, #ca9148, #d5a861, #e1bf7d, #edd599);
Which looks like that:
image
(I know this thread is very old, but still may be helpful)

Check this out:
background-color: #bf7a30;
background-image: linear-gradient(0deg, #bf7a30 0%, #edd599 46%, #bf7a30 100%);
I generated it real easy from www.gradientcss.com

Think's below css will suite your need.
CSS :
#header {
width:1000px;
height:250px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%);
}
http://jsfiddle.net/xPLPH/
Learn more about Linear Gradients:
https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

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>

Adding a top border with multiple non-gradient colors

I would like to add a border on top of my footer that's several different colors like so: http://i.imgur.com/Bf8ILCu.png
I looked around and I see examples of adding images, or gradients, or multiple colors for different sides but could't find anything for what I want to do.
You can use CSS Gradients for this.
Have a look at the snippet below (you may change the colors according to your requirements):
.border-top {
width: 100%;
height: 20px;
background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 10%, rgba(241,111,92,1) 10%, rgba(246,41,12,1) 10%, rgba(81,24,240,1) 10%, rgba(81,24,240,1) 23%, rgba(240,24,226,1) 23%, rgba(240,24,226,1) 34%, rgba(39,192,230,1) 34%, rgba(39,192,230,1) 46%, rgba(39,230,52,1) 46%, rgba(39,230,52,1) 58%, rgba(76,82,80,1) 58%, rgba(76,82,80,1) 69%, rgba(173,173,173,1) 69%, rgba(173,173,173,1) 81%, rgba(255,0,21,1) 81%, rgba(255,0,21,1) 91%, rgba(255,204,0,1) 91%, rgba(255,204,0,1) 100%);
}
body {
margin: 0;
}
<div class="border-top"></div>
Hope this helps!

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.

Generate a saturation/brightness mask using gradients

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).

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