w3resource

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

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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.