I’d like to create gradient background that has full color in the center of the box, then fades to transparent on both sides (left and right).
I’ve tried a few online css gradient generators but I cant seem to get this effect. Any help much appreciated.
I’ve poked around with some online gradient generators, too, and your only decent bet might be this one, though I despise the interface. Otherwise, it’s Photoshop or another similar program.
Question – is the box fixed width? If not, you can’t do it without CSS3. (either background-size or linear-gradient could do it).
If fixed width, open up your paint program and make a gradient image that’s the width, align it top center, and make it repeat-y.
For fluid I’ll often just make a gradient that’s equal to my min-width, that the edges fade to my background-color – then as the page gets wider the background is shown with the fade in the center.
In any case, if you care about backwards support you make a 256 byte .png and tile it on the Y axis. Otherwise CSS3 linear-gradient isn’t that hard to do.
background-color:#CCC;
background-image:-moz-linear-gradient(left,#FFF,#888,#FFF);
background-image:-webkit-linear-gradient(left,#FFF,#888,#FFF);
background-image:-o-linear-gradient(left,#FFF,#888,#FFF);
background-image:-ms-linear-gradient(left,#FFF,#888,#FFF);
background-image:linear-gradient(left,#FFF,#888,#FFF);
the first declaration being for browsers that don’t support CSS3. Left tells it to start on the left, the first value being the left color, next value being the center color, third value being the right color. Simple… or would be without all the vendor prefix bull to target all the different browsers who aren’t ready to say it’s something you should be even considering using on websites in the first place.
Which given the performance of linear-gradient under gecko based browsers… might be the truth, which is why I’d probably use an image instead.