Démo gradient

by Arnaud

HTML

<div class="boiteParent">
<div class="boiteFlotante boiteFlotante1" > </div>

</div>

<div class="boiteParent">
<div class="boiteFlotante boiteFlotante2" > </div>

</div>

<div class="boiteParent">
<div class="boiteFlotante boiteFlotante3" > </div>

</div>

<div class="boiteParent">
<div class="boiteFlotante boiteFlotante4" > </div>

</div>

<div class="boiteParent">
<div class="boiteFlotante boiteFlotante5" > </div>
</div>
<div class="boiteParent">
<div class="boiteFlotante boiteFlotante6" > </div>

</div>

<div class="boiteParent ">
<div class="boiteFlotante boiteFlotante7" > </div>

</div>

<div class="boiteParent ">
<div class="boiteFlotante boiteFlotante8" > </div>

</div>

<div class="boiteParent ">
<div class="boiteFlotante boiteFlotante9" > </div>

</div>

<div class="boiteParent ">
<div class="boiteFlotante boiteFlotante10" > </div>

</div>

CSS

.boiteParent{
position:relative;
margin:0 10px 20px;
float:left;
width:150px;
height:150px;
}

.boiteFlotante{

    background-image : url('https://wp.digitalin.fr/medias/images/logo_firefox.png');
     background-size:45px;

border:1px solid black;
  width:100%;
  height:100%;

  margin:0 20px 0 0;
  text-align:center;
}
.boiteFlotante1{
background: linear-gradient(red, blue);

}
.boiteFlotante2{
background: linear-gradient(-0.33turn,red, blue);
}
.boiteFlotante3{
background: linear-gradient(-33deg,red, blue);

}
.boiteFlotante4{
background: linear-gradient(to left,red, blue);

}

.boiteFlotante5{
background: radial-gradient(red, blue);

}

.boiteFlotante6{
background: linear-gradient(  red , blue 50%, red);

}
.boiteFlotante7{
background: linear-gradient(  red , blue 20%, green 50%, yellow 80%, red);

}
.boiteFlotante8{
background: radial-gradient(  red , blue 20%, green 50%, yellow 80%, red);

}
.boiteFlotante9{
background: linear-gradient(  rgba(255,255,255,0) , blue);

}
.boiteFlotante10{
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
.clear{
  clear:both;
}