How to give linear and radial gradient effects to your Web pages. Let's create a html document, named GradientUseLinear.html, to show the gradient effects using CSS file.
Linear Gradient:
CSS file Name:GradientLinear.css
body{
background:blue;
}
p
{
height:200px;
background:-webkit-gradient(linear, left top, left bottom, from(white), to(red));
}
The background of the body element of HTML document is set to the blue color. In addition, the background of p element is set to produce linear gradient effects using white and red colors. These colors are specified for the left top position and left bottom position of the display area.
HTML File Name: GradientUseLinear.html
<!doctype html>
<head>
<title>CSS Colors Web page</title>
<link rel="stylesheet" type="text/css" href="GradientLinear.css">
</head>
<body>
<p>How to give linear gradient effects to your Web pages.
</p>
</body>
</html>
We have created a HTML document that is linked with the GradientLinear.css file using the following code.
<link rel="stylesheet" type="text/css" href="GradientLinear.css">
The Output of the above document:
body{
background:blue;
}
p
{
height:600px;
background:-webkit-gradient(radial, 50% 50%, 0,50% 50%,350,from(green), to(#fff));
}
HTML File Name: RadialGradient.html
<!doctype html>
<head>
<title>CSS Colors Web page</title>
<link rel="stylesheet" type="text/css" href="RadialUseGradient.css">
</head>
<body>
<p>How to give Radial gradient effects to your Web pages.
</p>
</body>
</html>
The Browser view:
Linear Gradient:
CSS file Name:GradientLinear.css
body{
background:blue;
}
p
{
height:200px;
background:-webkit-gradient(linear, left top, left bottom, from(white), to(red));
}
The background of the body element of HTML document is set to the blue color. In addition, the background of p element is set to produce linear gradient effects using white and red colors. These colors are specified for the left top position and left bottom position of the display area.
HTML File Name: GradientUseLinear.html
<!doctype html>
<head>
<title>CSS Colors Web page</title>
<link rel="stylesheet" type="text/css" href="GradientLinear.css">
</head>
<body>
<p>How to give linear gradient effects to your Web pages.
</p>
</body>
</html>
We have created a HTML document that is linked with the GradientLinear.css file using the following code.
<link rel="stylesheet" type="text/css" href="GradientLinear.css">
The Output of the above document:
Radial Gradient:
CSS file Name: RadialUseGradient.css
background:blue;
}
p
{
height:600px;
background:-webkit-gradient(radial, 50% 50%, 0,50% 50%,350,from(green), to(#fff));
}
HTML File Name: RadialGradient.html
<!doctype html>
<head>
<title>CSS Colors Web page</title>
<link rel="stylesheet" type="text/css" href="RadialUseGradient.css">
</head>
<body>
<p>How to give Radial gradient effects to your Web pages.
</p>
</body>
</html>
The Browser view:
It's useful for me.
ReplyDelete