¿Cómo se hace un fondo degradado en css?

Question

¿Hay alguna manera de crear un fondo de degradado usando solo CSS?

Puede ver un ejemplo de lo que quiero lograr on this website.

Answer 1

uso esto en tu 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%); 

Consulte también:

• The specification
• The MDN documentation

Answer 2

añadir dos etiqueta div y dar fondo color de los enlaces de este

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

Ésta no es la sintaxis exacta se trata de una idea de que la forma en U puede hacer

Answer 3

probar este sitio web.

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

Pero también hay imágenes y otras cosas en este sitio Web, por lo que si desea copiar el estilo, mira cómo lo han hecho y tratar de aplicar por su cuenta! También hay un sitio web que tiene bastante neet de trama de fondo que, combinado con gradientes parecen absolutamente rico y hermoso:

• http://subtlepatterns.com/

Un código de ejemplo simple para gradientes que se mostrarán en todos los navegadores:

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

Answer 4

simple y fácil de hacer. 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%); 

Answer 5

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

Answer 6

Uso background-image con linear-gradient() o 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>

Según caniuse.com, gradientes CSS son soportados por todos los principales navegadores. Si tiene que admitir IE < = 9, use la opción de fondo de fondo de imagen o de color liso. Si tiene que admitir Android Browser < = 4.3, use también la versión con prefijo (-webkit-linear-gradient).