How do you make a gradient background in css?

问题

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.

回答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%);

回答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%);

回答3:

Use background-image with linear-gradient() or radial-gradient().

.linear-gradient {
  background-image: linear-gradient(to bottom, #000077, #65A5FF);
}
.radial-gradient {
  background-image: radial-gradient(#000077, #65A5FF);
}
div {
  width: 100%;
  height: 200px;
}

<h1>Linear gradient</h1>
<div class="linear-gradient"></div>
<h1>Radial gradient</h1>
<div class="radial-gradient"></div>

According to caniuse.com, CSS gradients are supported by all major browsers. If you have to support IE <= 9, use plain-color or image background fallback. If you have to support Android Browser <= 4.3, also use prefixed version (-webkit-linear-gradient).

回答4:

.bckgrnd {
  background-color:Green;
  background-image: -webkit-gradient(linear, 0% 0%,0% 0%, from(Green), to(Yellow));
  background-image: -webkit-linear-gradient(top, Green, Yellow);
  background-image: -moz-linear-gradient(top, Green, Yellow);
  background-image: -ms-linear-gradient(top, Green, Yellow);
  background-image: -o-linear-gradient(top, Green, Yellow);
}

回答5:

Try this website.

http://www.colorzilla.com/gradient-editor/

But there are also images and other things on this website, so if you want to copy the style, look how they have done it and try to implement it on your own ! There is also a website which has pretty neet background pattern's which, combined with gradients look absolutely rich and beautiful:

http://subtlepatterns.com/

A simple sample code for gradients which will be displayed in every browser:

background: rgb(243,226,199);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZTJjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2MxOWU2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2I2OGQ0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOWQ0YjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)));
background: -webkit-linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -o-linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -ms-linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 );

回答6:

Add two div tag and give background color link this

<div style="background-color:black"> </div>
<div style="background: -moz-linear-gradient(top, #55aaee, #003366);"> </div>

This is not exact syntax this is an idea that how u can do

来源：https://stackoverflow.com/questions/9428893/how-do-you-make-a-gradient-background-in-css

标签

css

gradient