gadient

<html><head><title>gadient</title> <style> .mygra-a{ width: 200px; height: 75px; padding:15px; border:3px solid green; } .mygra-b{ background-image: repeating-linear-gradient(to right,red,pink 10%,maroon 20%); } .mygra-c{ background-image: linear-gradient(to right,red,yellow); } /*left, bottom right, 180deg */ .mygra-d{ background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } .mygra-e{ background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));} .mygra-g{ background-image: repeating-radial-gradient(circle,red, yellow 50px, green 80px); } </style></head> <body> <h1>CSS Gradient Background</h1> <div class="mygra-a mygra-b"><h2>Radial Gradient</h2></div> <div class="mygra-a mygra-c"><h2>Radial Gradient</h2></div> <div class="mygra-a mygra-d"><h2>Radial Gradient</h2></div> <div class="mygra-a mygra-e"><h2>Radial Gradient</h2></div> <div class="mygra-a mygra-g"><h2>Radial Gradient</h2></div> </body></html>