I have this set up as an element's background:
div{
width: 400px;
height: 200px;
background: linear-gradient(to right, #6f5a40 40%, #149f79 60%);
}
But the gradient seems to strongly favor the green color despite both colors being given equal space on the gradient function. Is this simply a trick of our eyes, being able to distinguish green better than other colors, or is there something I can do programmatically to fix this? Switching the order of the gradients doesn't seem to do anything: green appears to be favored over the brown.
Fiddle: http://jsfiddle.net/xw6fqymu/
EDIT: I should also point out that this gradient is being overlaid on an image, where the effect is even more noticeable. I don't imagine the image has much to do with this at all since reordering the colors with the image has about as much effect as without the image.
This seems to be a perceptual issue.
Here are two sample pictures I've created in a graphic editor.
Both gradients are purely linear (0% to 100%).
As you probably notice, eye starts to perceives colors close to the desaturated edge very early.
What you may do is a non-symmetric distribution, e.g. linear-gradient(to right, #6f5a40 48%, #149f79 70%); — see fiddle.
Related
So I am trying to make a linear gradient from an image with a solid color, however, there's a darker line visable where the color and gradient cross:
example:
The CSS:
.green-background {
background: linear-gradient(to bottom, #3c7c3f, #ffffff);
background: #3c7c3f;
background: -webkit-linear-gradient(top, #3c7c3f, #ffffff);
padding: 100px 0;
}
How to solve this?
Thank you!
It's actually an optical illusion. If you check the HSL values pixel per pixel, you'll see that the color isn't actually getting darker, and the gradient works as expected. I guess it's just the way our eyes perceive such a drastic change in colors (dark green to white).
I suggest try adding a color in between these two or maybe make the top green color a bit lighter. Try to experiment until you find a good match.
background: -webkit-linear-gradient(#FFFFFF, #EAEAEA);
background: -o-linear-gradient(#FFFFFF, #EAEAEA);
background: -moz-linear-gradient(#FFFFFF, #EAEAEA);
background: linear-gradient(#FFFFFF, #EAEAEA);
What I basically want to do, is to have some sort of minimum and maximum gradient length (for instance, the gradient can't be smaller than 500px, even if the background is, and neither can it be bigger than 500px, even if the background is). I have tried using this method:
background-size:500px;
(aswell as combining it with background-repeat:y-repeat), but that doesn't work, since the gradient later on repeats itself from top (and what I would like is for it to maintain its ending-color through the rest of the element).
So shortly, I'm wondering if there's a way to stop a gradient after a certain height, only allowing it to cover a part of the element (hence, preventing it from looking different on all pages, with different sized elements), without using images as background. However, I'd also like to know if using this method is worth it, both when it comes to compatibility and effort.
Thanks!
You just need to add color stops to your gradient, like so:
Working Example
body, html {
height:200%;
}
body {
background: -moz-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
background: -webkit-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
}
MDN Documentation for Linear-gradient
So I made the following test fiddle, and it seems that if you specify a background-size then the gradient will be resized to that size regardless of the element dimensions (note that you have to explicitly define a width and a hight for background-size to work properly in Firefox).
http://jsfiddle.net/myajouri/y4b3Z/
I have checked this in latest Chrome, Safari and Firefox and looks the same in all three borwsers.
I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread
I want to create a nice striped diagonal or horizontal background (yellow and black) for http://www.hallmorkshoneybess.co.uk but can't find any tutorials on how to do it.
Can you please help. Thanks
http://lea.verou.me/css3patterns/ here are some excellent samples that you can use.
CSS3 isnt 100% accepted therefore, I would stick with something like http://www.stripegenerator.com
From what Crinsane said you can do it like this:
background-color: black;
background: linear-gradient(white 50%, black 50%);
background-size: 100% 20%;
background-repeat: repeat-y;
So basically we're creating a linear gradient of half black and half white, we then define its size as 20% of its container. So finally when we repeat it we get several stripes.
Change the 20% for different sized stripes, and the 50% 50% ratio for a different ratio of the 2 colours.
Hope this helps.
You can use a combination of css3 linear-gradients and background-size & repeat.
you can easily do this using a linear-gradient with color-stops: http://www.techrepublic.com/blog/webmaster/css3-gradients-setting-color-stops/937
I am working on a website which uses multiple css3 gradients as overlay for a background tiled with texture image
site url: --snipped--
currently for header i am using following css:
#header {
background: #DBD6D3;
height: 364px;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF));
}
#header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;}
here headerBg.png is a semi-transparent texture of size 5x5 pixel, ad for body I need to create this background:
I need to know how to make this kind of radial background in CSS3, initially I had used same code as header but with rgba() for color, setting end of the gradient with 0 opacity but it created too much noise.
tried few online generators as well for CSS3 radial background but none of them were good!
This image i am using is taking up 280kbs and I want to reduce it as it significantly effects the performance! Help would be appreciated.
update:
Upload psd, can be downloaded from
http://ylspeaks.com/stackoverflow_css3.zip
and adding bounty
Edit Jan 2011:
Webkit nightly now supports elliptical gradients http://webkit.org/blog/1424/css3-gradients/, these will eventually find their way into Safari and Chrome. Faking elliptical radial gradients through css transforms will eventually be unnecesary.
Your problem has the most difficult constraints I've ever encountered, but it is an interesting challenge and it illustrates the limitations of each browsers approach for radial backgrounds, so that's why I decided on trying.
First, the rgba approach is stillborn because the opacity is going to hide some of the noise. It's better to apply semitransparent noise on top of the gradient, you can avoid the extra div by applying multiple background on the same image:
background: url(noise.png) repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D)) transparent;
You may notice the color property at the end of declaration, it looks weird but this how you declare colors when you apply multiple backgrounds.
Second, webkit doesn't support elliptical backgrounds, so the work around to this is squishing the gradient through -webkit-transform and positioning it a bit further up:
-webkit-transform: scale(1, 0.7) translate(0, -350px);
For sanity, the right thing to do would seem be applying circular backgrounds on both FF and webkit and then transform them. However, Firefox's transform doesn't support scaling gradients! So we apply an elliptical background:
background: url(noise.png) repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent;
But, since Webkit's container is squished, Firefox's gradient is larger! At this point we would think about applying different css rules for the height of the gradient, but since Firefox doesn't scale the gradient, we can apply the same transformation on the elliptical background the get the containers to be of the same height:
-moz-transform: scale(1, 0.7) translate(0, -250px);
And voila! we have an elliptical gradient with noise, that works on both Safari and Firefox!
http://duopixel.com/stackoverflow/gradient/
background: #702914;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#A94122,#702914);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#702914),to(#A94122));