i have been trying to make a cool looking gradient in CSS, but i run into an unacceptable issue. The CSS gradient is banding, and it does not look good. I also do no want to use any images. Here is my code:
background-image: -moz-linear-gradient(top, #333, #000);
background-image: -ms-linear-gradient(top, #333, #000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#000));
background-image: -webkit-linear-gradient(top, #333, #000);
background-image: -o-linear-gradient(top, #333, #000);
background-image: linear-gradient(top, #333, #000);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333', endColorstr='#000', GradientType=0);
What can i do to fix this?
For what it's worth, I cannot see the banding issue you describe on my monitor, but I believe I know what you are getting at.
Generally, browsers do not use dithering when creating gradients. This means that the steps between colors can be more noticeable. The only way around this is to make your gradient in software that does dither, such as Photoshop, and then set the background color to be an image. For such a high quality image though, the size will be very large, and probably isn't worth it. In addition, the size becomes fixed, and not dynamic as your CSS is.
See also: http://bjango.com/articles/gradients/
This can occur if the difference between the start and end color is too minor to properly display the steps in-between.
Related
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 get this warning on CSS3 when I set the background of my div:
-webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f2f2f2', endColorstr='#f2f2f2', GradientType=0);
It says,
is not a valid value for -webkit-filter.
The following filter wlil only be read by IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
For chrome you should be using
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
For FireFox
background: -moz-linear-gradient(top, #ccc, #000);
Cross-Browser CSS Gradient
Cross-browser gradient generator
Also you could upload image and zilla automatically generate valid gradient and cross-browser code.
Does anyone know how I could plot a gradient like in the image below with pure CSS.
It doesn't have to work in IE.
I can get it to work but I can't seem to be able to taper off the gradient on both sides left and right like the image shows.
Any ideas would be grateful. Again this is using straight css to do this.
This website is amazing for doing CSS gradients:
http://www.colorzilla.com/gradient-editor/
You can even import an image or CSS.
An example would be:
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
Why do you need gradient for this? How about drop shadows.
Examples
That is a very complex task. They position one div behind the front one. The one behind is where they create the shadow, then they transform it and position it to achieve that effect. Here is a guide guide to do this technique (has it on one corner, but you can tweak a bit and get that effect)... I am sure there are specific guides to achieve the exact effect you want to out there as well, but they seem to be escaping my search skills for the day.
http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
With pure CSS, you could use radial-gradient.
Suppose that you have a div to emulate that shadow, and it has 300px of width and 100px of height, then, you just could achieve the effect with:
background: radial-gradient(70% 10%,gray 20%, white 60%);
background-position: 0px -54px;
background-size: 100% 110%;
Here is the example --> enter link description here
Doen anyone know how to use two colors in one table cell (td) and how to let them overflow inc each other?
For examble. For my website (www.ericversteeg.nl) i want to use in my guest book title columns light purple in the top of the cell and dark purple in the bottom.
I think i have to assign a class in the td.
But how do i make my class in CSS?
Greetings Eric
The CSS 3 drafts introduce gradient colours.
e.g.
background: linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%);
Note that browser support is not universal.
I found this tool quite helpfull: CSS3 Gradient Generator. The code it produces isn't the most beutiful but it works!
There are a couple ways to do this. The first is to have a div on top and a div on bottom, each with the different color.
<td class="multi_purple">
<div class="top">
</div>
<div class="bottom">
</div>
</td>
and style the two divs with their respective colors.
A "better" option would be to just use a background image of the right colors. This will be cross browser supported, but doesnt do well if your table grows or shrinks in size.
The newest option would be to add a gradient. check out http://www.css3please.com to see the syntax for this.
but its something like this
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
with of course your purple shades in place.
This degrades into a solid color for browsers that dont support gradients (lookin at you ie 6/7?)
You could use a background gradient like was suggested, or using a background image that has both colors in it.
If you know that your cells are going to be say, 30px tall, make a 30px tall by 1px wide image that is split where you want it, and have both colors in it. Then using css:
td {
background-image: url(colors.png);
background-repeat: repeat-x;
}
To tile it horizontally, thus getting the effect you're after.
Is this what you're looking for?
http://jsfiddle.net/4NXRx/2/
It uses a background gradient and you don't need to call any image resources. You also don't have to worry about updating the image.
There's a back-up color for browsers that don't support gradients. It's an effect that isn't crucial to all visitors, so it's no big deal if some visitors don't see a gradient.
Note, that I have made the stops at 49%, so there is no gradual change. I don't know if that's what you want. Obviously, you'll have to choose nicer colors.
table td {
padding: 10px;
background-color: #CEC3FA;
background-image: linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -o-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -moz-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -ms-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-gradient(
linear,
right 49%,
right 50%,
color-stop(0.08, #CEC3FA),
color-stop(0.51, #B9AAD1)
);
I'm designing a website that is going to have multiple nested divs for the side menu. Each div's background is a darker shade of blue than that of the div which surrounds it.
I'd like for each div to have a gradient effect in the background, where it goes from a slightly darker blue to the background color of the div.
I know CSS3 has built-in support for gradients, but older browsers wouldn't be able to display them, so that's not an option. Instead, what I've been doing is creating a PNG background for each individual div.
However, this PNG background option is not super sustainable. If I decide that I want a slightly different color as the background, I have to go create a new PNG with that new color. Annoying.
I wish that I could use a single semi-transparent grey to transparent PNG image in ALL of the divs so that I could freely change the background colors. But the problem with using such a PNG is that it kind of desaturates and dulls rather than darkens...
Is there any way to manipulate such a PNG to darken whatever it overlays WITHOUT desaturating???
There you go:
your-element{
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
}
and your rule for IE:
your-element{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
zoom: 1;
}
Easy-peasy cross-browser compatible for say 99% of your browsers.