10 best gradient color css for your website

Marvlous dev 15 Dec 2019

Hello everyone, right now in this post I am here going to share with you guys my experiences playing around with some color to make gradient effect in CSS, I think this gradient effect will make your website slightly different than before, sometimes solid color makes us little bit boring, here are my 10 favorites color to make a great gradient website

First

 

html and css code

<div class='gradient-1'><div>

.gradient-1{
  width: 100%;
  height: 250px;
  display: flex;
  background: linear-gradient(to right, #FAD7A1, #E96D71);
}

 

Second

 

html and css code

<div class='gradient-2'><div>

.gradient-2{
  width: 100%;
  height: 250px;
  display: flex;
  background: linear-gradient(to right,  #9708CC, #43CBFF);
}

 

Third

 

html and css code

<div class='gradient-3'><div>

.gradient-3{
  width: 100%;
  height: 250px;
  display: flex;
  background: linear-gradient(to right,  #8C1BAB, #F761A1);
}

 

Fourth

 

html and css code

<div class='gradient-4'><div>

.gradient-4{
  width: 100%;
  height: 250px;
  display: flex;
  background: linear-gradient(to right,  #130CB7, #52E5E7);
}

 

Fifth

 

html and css code

<div class='gradient-5'><div>

.gradient-5{
  width: 100%;
  height: 250px;
  display: flex;
  background: linear-gradient(to right,  #F072B6, #FFF886);
}

 

Sixth

 

html and css code

<div class='gradient-6'><div>

.gradient-6{
  width: 100%;
  height: 250px;
  display: flex;
  background: linear-gradient(to right,  #FD6585, #FFD3A5);
}

 

Seventh

 

html and css code

<div class='gradient-7'><div>

.gradient-7{
  width: 100%;
  height: 250px;
  display: flex;
  background: linear-gradient(to right,  #0396FF, #ABDCFF);
}

 

Eighth

 

html and css code

<div class='gradient-8'><div>

.gradient-8{
  width: 100%;
  height: 250px;
  display: flex;
  background: linear-gradient(to right,  #EA5455, #FEB692);
}

 

Ninth

 

html and css code

<div class='gradient-9'><div>

.gradient-9{
  width: 100%;
  height: 250px;
  display: flex;
  background: linear-gradient(to right, #CE9FFC, #7367F0);
}

 

Tenth

 

html and css code

<div class='gradient-10'><div>

.gradient-10{
  width: 100%;
  height: 250px;
  display: flex;
  background: linear-gradient(to right,  #32CCBC, #90F7EC);
}