Geek Answers Handbook

How to make accurate CSS3 Linear gradient like in image?

For example, this is the gradient I want to do in CSS3 enter image description here

I can use 1 px image cropping and repeat along the x axis, as we did before. But now, if I want to make the exact same gradient using CSS3.

I know many free CSS3 Gradient Generator, Maker, available on the Internet. My questions are: which generator is most preferred and how to make the necessary gradients with this.

Edit after Alex answer: more gradients enter image description hereenter image description hereenter image description here

+3
source share
3 answers

Ultimate CSS Gradient Generator is my preferred choice.

background: #CCCCCC; background: -moz-linear-gradient(top, #CCCCCC 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CCCCCC), color-stop(100%,#343434)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCCC', endColorstr='#343434',GradientType=0 );

With this gradient, it's pretty easy to do. You can see that it has one color on top and steps to the next below. Just copy the top and bottom colors and place them in the corresponding inputs on the generator.

+2
source

The linear gradient should work fine:

 background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#343434)); background: -moz-linear-gradient(top, #ccc, #343434);
0
source

I will recommend four css3 gradient generators for this assignment. There are other generators, but they are not so good.

Of all this, gradientoo seems to be the most convenient and easy to use. This gives CSS3 linear, radial and elliptical gradients (all cross browsers). It is also available as an add-on for Firefox. One of these generators will do your job (this is my personal opinion, you may differ from it, I should also mention that gradientoo was developed by me)

0
source

More articles:


All Articles