web-dev-qa-db-fra.com

Comment créer un fond dégradé en css?

Est-il possible de créer un fond dégradé en utilisant uniquement du CSS?

Vous pouvez voir un exemple de ce que je veux réaliser sur ce site .

cssgradient
20
user1179295

Utilisez ceci dans votre 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%);

Voir également:

25
Ghost Answer

Simple et facile à faire. Essayez ce lien

/* 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%);
4
Abhishek

Utilisez background-image avec linear-gradient() ou 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>

Selon caniuse.com , les dégradés CSS sont pris en charge par tous les principaux navigateurs. Si vous devez prendre en charge IE <= 9, utilisez le repli en couleur unie ou en arrière-plan de l'image. Si vous devez prendre en charge Android Browser <= 4.3, utilisez également la version préfixée (-webkit-linear-gradient).

3
Michał Perłakowski
.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);
}
1
Jay Shukla