Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Radial Gradient Background Tutorial

Learn the various parameters and values associated with CSS radial-gradient() and repeating-radial-gradient() that can be used as the background setting for HTML elements. We also explain radial gradient color stops, sizing and positioning. <!DOCTYPE html> <html> <head> <style> div{ float:left; width:32%; height:125px; margin:4px; color:#FFF; font-size:30px; background:#CCC; } /* radial-gradient(position, shape or size, color-stops) */ div.gradient1{ background: -webkit-radial-gradient(#F0F, #000); background: -moz-radial-gradient(#F0F, #000); background: -ms-radial-gradient(#F0F, #000); background: -o-radial-gradient(#F0F, #000); background: radial-gradient(#F0F, #000); } div.gradient2{ background: -webkit-radial-gradient(magenta, turquoise, black); background: -moz-radial-gradient(magenta, turquoise, black); background: -ms-radial-gradient(magenta, turquoise, black); background: -o-radial-gradient(magenta, turquoise, black); background: radial-gradient(magenta, turquoise, black); } div.gradient3{ background: -webkit-radial-gradient(circle, magenta, turquoise, black); background: -moz-radial-gradient(circle, magenta, turquoise, black); background: -ms-radial-gradient(circle, magenta, turquoise, black); background: -o-radial-gradient(circle, magenta, turquoise, black); background: radial-gradient(circle, magenta, turquoise, black); } div.gradient4{ background: -webkit-radial-gradient(bottom, circle, magenta, turquoise, black); background: -moz-radial-gradient(bottom, circle, magenta, turquoise, black); background: -ms-radial-gradient(bottom, circle, magenta, turquoise, black); background: -o-radial-gradient(bottom, circle, magenta, turquoise, black); background: radial-gradient(bottom, circle, magenta, turquoise, black); } div.gradient5{ background: -webkit-radial-gradient(top right, circle, magenta, turquoise, black); background: -moz-radial-gradient(top right, circle, magenta, turquoise, black); background: -ms-radial-gradient(top right, circle, magenta, turquoise, black); background: -o-radial-gradient(top right, circle, magenta, turquoise, black); background: radial-gradient(top right, circle, magenta, turquoise, black); } div.gradient6{ background: -webkit-radial-gradient(70% 20%, 100px 100px, magenta, turquoise, black); background: -moz-radial-gradient(70% 20%, circle, magenta, turquoise, black); background: -ms-radial-gradient(70% 20%, 100px 100px, magenta, turquoise, black); background: -o-radial-gradient(70% 20%, 100px 100px, magenta, turquoise, black); background: radial-gradient(70% 20%, 100px 100px, magenta, turquoise, black); } div.gradient7{ background: -webkit-radial-gradient(circle, magenta 40px, turquoise 88px, black 120px); background: -moz-radial-gradient(circle, magenta 40px, turquoise 88px, black 120px); background: -ms-radial-gradient(circle, magenta 40px, turquoise 88px, black 120px); background: -o-radial-gradient(circle, magenta 40px, turquoise 88px, black 120px); background: radial-gradient(circle, magenta 40px, turquoise 88px, black 120px); } div.gradient8{ background: -webkit-repeating-radial-gradient(magenta 50%, turquoise 60%, black 70%, magenta); background: -moz-repeating-radial-gradient(magenta 50%, turquoise 60%, black 70%, magenta); background: -ms-repeating-radial-gradient(magenta 50%, turquoise 60%, black 70%, magenta); background: -o-repeating-radial-gradient(magenta 50%, turquoise 60%, black 70%, magenta); background: repeating-radial-gradient(magenta 50%, turquoise 60%, black 70%, magenta); } div.gradient9{ background: -webkit-repeating-radial-gradient(circle, magenta 50%, turquoise 60%, black 70%, magenta); background: -moz-repeating-radial-gradient(circle, magenta 50%, turquoise 60%, black 70%, magenta); background: -ms-repeating-radial-gradient(circle, magenta 50%, turquoise 60%, black 70%, magenta); background: -o-repeating-radial-gradient(circle, magenta 50%, turquoise 60%, black 70%, magenta); background: repeating-radial-gradient(circle, magenta 50%, turquoise 60%, black 70%, magenta); } </style> </head> <body> <div class="gradient1">1</div> <div class="gradient2">2</div> <div class="gradient3">3</div> <div class="gradient4">4</div> <div class="gradient5">5</div> <div class="gradient6">6</div> <div class="gradient7">7</div> <div class="gradient8">8</div> <div class="gradient9">9</div> </body> </html>
thumb

CSS Videos

Background and Overlay Effects

Multiple Background Images TutorialTheater Mode Overlay Tutorial Javascript Light Switch Toggle DarkFixed Header and Footer Div Layout TutorialLinear Gradient Background TutorialRadial Gradient Background TutorialVideo Background Tutorial Plus Youtube Embed