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

Last update on March 05 2024 13:26:20 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!doctype html><!-- Document type declaration -->
<html><!-- Opening HTML tag -->
<head><!-- Head section containing metadata -->
<title>HTML CSS Exercise - create linear, radial, repeating linear and repeating radial gradients with CSS3</title><!-- Title of the HTML document -->
<style type="text/css"> /* Opening style tag for CSS with type attribute */
.container{ /* Style for container class */
	text-align:center; /* Align text to the center */
	padding:20px 0; /* Padding of 20px on top and bottom, 0 on left and right */
	width:960px; /* Width of the container */
	margin: 0 auto; /* Centering the container horizontally */
}

.container div{ /* Style for div elements inside container class */
	width:200px; /* Width of the div */
	height:150px; /* Height of the div */
	display:inline-block; /* Display as inline block */
	margin:2px; /* Margin around the div */
	color:#ec8007; /* Text color */
	vertical-align: top; /* Align elements to the top */
	line-height: 230px; /* Set line height to vertically center text */
	font-size: 20px; /* Font size of the text */
}

.linear{ /* Style for elements with class linear */
	background:linear-gradient(to bottom, #4b6c9c , #5ac4ed); /* Linear gradient background from top to bottom */
}

.radial{ /* Style for elements with class radial */
	background:radial-gradient(#4b6c9c,#5ac4ed); /* Radial gradient background */
}

.repeating-linear{ /* Style for elements with class repeating-linear */
	background:repeating-linear-gradient(-45deg, #4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px); /* Repeating linear gradient */
}

.repeating-radial{ /* Style for elements with class repeating-radial */
	background:repeating-radial-gradient(#4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px); /* Repeating radial gradient */
}
</style><!-- Closing style tag -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<div class="container"><!-- Container div -->
	<div class="linear">Linear</div><!-- Linear gradient div -->
	<div class="radial">Radial</div><!-- Radial gradient div -->
	<div class="repeating-linear">Repeating Linear</div><!-- Repeating linear gradient div -->
	<div class="repeating-radial">Repeating Radial</div><!-- Repeating radial gradient div -->
</div><!-- Closing container div -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->

Explanation:

The HTML structure consists of a container div with four child divs, each representing a different gradient type.
CSS is used to style the container and the gradient divs.
.container class sets the container's text alignment, padding, width, and centers it horizontally.
.container div class styles the divs inside the container, setting their dimensions, display property, margin, text color, vertical alignment, line height, and font size.
.linear, .radial, .repeating-linear, .repeating-radial classes define different gradient backgrounds using CSS gradient functions.
Each gradient class specifies the gradient colors and stops, creating various visual effects.

Live Demo:

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

Supported browser


Yes	Yes	Yes	Yes	Yes