⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Radial Gradient Background Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲