CSS Gradients

gradients.css

/*Rainbow*/
  background: radial-gradient(50% 123.47% at 50% 50%,#00ff94 0,#720059 100%),linear-gradient(121.28deg,#669600 0,red 100%),linear-gradient(360deg,#0029ff 0,#8fff00 100%),radial-gradient(100% 164.72% at 100% 100%,#6100ff 0,#00ff57 100%),radial-gradient(100% 148.07% at 0 0,#fff500 0,#51d500 100%);
  background-blend-mode: screen,color-dodge,overlay,difference,normal;

/*Version 2*/
  background: #42275a;
  background: -webkit-linear-gradient(to right, #734b6d, #42275a);
  background: linear-gradient(to right, #734b6d, #42275a);

/*Version 3*/
  background: #000428;
  background: -webkit-linear-gradient(to right, #004e92, #000428);
  background: linear-gradient(to right, #004e92, #000428);

/*Version 4*/
  background: #134E5E;
  background: -webkit-linear-gradient(to right, #71B280, #134E5E);
  background: linear-gradient(to right, #71B280, #134E5E);

/*Version 5*/
  background: #200122;
  background: -webkit-linear-gradient(to right, #6f0000, #200122);
  background: linear-gradient(to right, #6f0000, #200122);

/*Version 6*/
  background: #FF8008;
  background: -webkit-linear-gradient(to right, #FFC837, #FF8008);
  background: linear-gradient(to right, #FFC837, #FF8008);

/*Version 7 - Forest*/

background: #093028;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #237A57, #093028);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #237A57, #093028); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


/*Blue box*/
.testimonial .carousel-item {
  border: 1px solid #000428;
  background-color: #004e92;
  padding: 46px;
  text-align: center;
  margin: 10% 8%;
  opacity: 0.6;
  color: white;


/* Geometric */
background-image: url(https://beta.e-patchesandcrests.com/custom_orders/pexels-dana-tentis-370799.jpg);

.testimonial .carousel-item {
background-color: #3965A6;
padding: 46px;
text-align: center;
margin: 10% 8%;
opacity: 0.9;
color: white;


/*Greys https://hookagency.com/blog/ui-gradients/ Medium*/
background: linear-gradient(360deg,#949494 10%,#efefef 360%);