How to Create Color Boxes with Simple CSS

<p class="ta-colorbox LuxTechZone-1">LuxTechZone</p>
  

 <p class="ta-colorbox LuxTechZone-2"=>LuxTechZone</p>
  

<p class="ta-colorbox LuxTechZone-3">LuxTechZone</p>
  

<p class="ta-colorbox LuxTechZone-4">LuxTechZone</p>
  

<p class="ta-colorbox LuxTechZone-5">LuxTechZone</p>
  

<p class="ta-colorbox LuxTechZone-6">LuxTechZone</p>
  

<p class="ta-colorbox LuxTechZone-7">LuxTechZone</p>
  

<p class="ta-colorbox LuxTechZone-8">LuxTechZone</p>
  

/* LuxTechZone colorbox */
.ta-colorbox {
overflow: hidden;
position: relative;
margin: .5rem 0 1rem;
transition: box-shadow.25 s;
border-radius: 10px;
color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 20px;
font-size: 16px
}
.ta-colorbox.LuxTechZone {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.ta-colorbox.LuxTechZone-1 {
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
.ta-colorbox.LuxTechZone-2 {
background-image: linear-gradient( 180deg,  rgba(24,151,0,1) -0.7%, rgba(50,208,0,1) 89.9% );
}
.ta-colorbox.LuxTechZone-3{
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
}
.ta-colorbox.LuxTechZone-4 {
background-image: radial-gradient( circle 849px at 0.1% 44.6%,  rgba(250,173,0,1) 0%, rgba(141,19,76,1) 90% );
  }
.ta-colorbox.LuxTechZone-5{
background-image: linear-gradient( 87.9deg,  rgba(140,253,242,1) 9.7%, rgba(81,162,228,1) 45.5%, rgba(154,16,154,1) 92.5% );
}
.ta-colorbox.LuxTechZone-6{
background-image: radial-gradient( circle 986.6px at 10% 20%,  rgba(251,6,6,0.94) 0%, rgba(3,31,213,1) 82.8%, rgba(248,101,248,1) 87.9% );
}
.ta-colorbox.LuxTechZone-7{
background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(2,37,78,1) 0%, rgba(4,56,126,1) 19.7%, rgba(85,245,221,1) 100.2% );
}
.ta-colorbox.LuxTechZone-8{
background-image: linear-gradient( 90.4deg,  rgba(244,199,62,1) -3.8%, rgba(244,62,62,1) 46.8%, rgba(245,61,195,1) 98.8% );
}