How do you make a gradient background in css?

Question

Is there any way to create a gradient background using nothing but CSS?

You can see an example of what I want to achieve on this website.

Answer 1

Use this in your CSS:

background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%); background-image: -moz-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgb(254,133,107)), color-stop(0.62, rgb(35,171,17))); background-image: -webkit-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%); background-image: -ms-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%); /* This last line is all you need for modern browsers */ background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%); 

See also:

• The specification
• The MDN documentation

Answer 2

Simple and easy to make. Try this link

/* IE10 Consumer Preview */  background-image: -ms-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);  /* Mozilla Firefox */  background-image: -moz-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);  /* Opera */  background-image: -o-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);  /* Webkit (Safari/Chrome 10) */  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCFEFF), color-stop(1, #AF00EF));  /* Webkit (Chrome 11+) */  background-image: -webkit-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);  /* W3C Markup, IE10 Release Preview */  background-image: linear-gradient(to bottom, #FCFEFF 0%, #AF00EF 100%);