HTML CSS Exercise: Create linear, radial, repeating linear and repeating radial gradients with CSS3

Last update on August 19 2022 21:50:52 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!doctype html>
<html>
<head>
<title>HTML CSS Exercise - create linear, radial, repeating linear and repeating radial gradients with CSS3</title>
<style type="text/css">
.container{
	text-align:center;
	padding:20px 0;
	width:960px;
	margin: 0 auto;
}

.container div{
	width:200px;
	height:150px;
	display:inline-block;
	margin:2px;
	color:#ec8007;
	vertical-align: top;
	line-height: 230px;
	font-size: 20px;
}

.linear{
	background:linear-gradient(to bottom, #4b6c9c , #5ac4ed);
}

.radial{
	background:radial-gradient(#4b6c9c,#5ac4ed);
}

.repeating-linear{
	background:repeating-linear-gradient(-45deg, #4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);
}

.repeating-radial{
	background:repeating-radial-gradient(#4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);
}
</style>
</head>
<body>
<div class="container">
	<div class="linear">Linear</div>
	<div class="radial">Radial</div>
	<div class="repeating-linear">Repeating Linear</div>
	<div class="repeating-radial">Repeating Radial</div>
</div>
</body>
</html>

Live Demo:

See the Pen create-gradient-with-css-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes