CODEWITHSUNDEEP
css
Jitendra Vyas
Jitendra Vyas

Reputation: 152617

How to make exact CSS3 Linear gradient like it's in the image?

For example this is gradient which I want to make in CSS3 enter image description here

I can use 1 px image cut and repeat in x axis as we were doing before. But now if I want to make same exact gradient using CSS3.

I know many free CSS3 Gradient Generator , Maker available on Internet. My questions is Which Generator is most preferred and how to make needed gradients with that.

Edit after Alex's answer : more Gradients enter image description here enter image description here enter image description here

Upvotes: 3

Views: 2397

Answers (3)

GILL
GILL

Reputation: 319

I will recommend four css3 gradient generators for this job. There are other generators also but they are not as good.

  1. Gradient generator at glrzad.com
  2. Ultimate gradient generator at colorzilla homepage
  3. Gradient generator hosted at microsoft
  4. gradientoo.

Out of all these, gradientoo seems to be the most user friendly and easy to use. It gives you linear, radial and elliptical CSS3 gradients (all cross browser). 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 must also mention that gradientoo is developed my me)

Upvotes: 0

Yoann
Yoann

Reputation: 5077

Linear gradient should work fine :

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

Upvotes: 0

alex
alex

Reputation: 490143

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

It is rather easy to make the above gradient with. You can see it has one colour at top and steps to the next at bottom. Simply copy the top and bottom colour and place them into the relevant inputs on the generator.

Upvotes: 2

Related Questions