Background Gradient and Box Shadow in CSS
Background Gradient and Box Shadow in CSS !When selecting a Background colour for your Website , well you can get more creative by adding gradient colour to your Texture background.
CSS Color Picker
Using Gradient
To add a gradient colour use the” Linear-gradient (Direction , Starting color, Ending color)” Function. you will need to input where the Direction of the Colour mixing from left or from the right or virce versa.
Not All Gradient colour supported by all type of browser. you will need to add eg : “background: -webkit-linear-gradient(red, yellow); “.
The Purpose is to let the browser to load the gradient properly.
Shadow in CSS
You can do a Box Shadow by using the CSS function box-shadow, “box-shadow: width,Height ,blur out area,color;”
You can create a text shadow by using CSS function “text-shadow: width,Height ,blur out area,color;”
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
background-color: grey;
box-shadow: 20px 20px 5px #888888;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Check out the Sample Code below
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GETTING STARTED WITH BRACKETS</title>
<meta name="description" content="Just another Website.">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>This is just Another Website</h1>
<p>
Welcome to Brian Website
</div>
</body>
</html>
CSS
.container{
background: linear-gradient(to right, #cc99ff ,#ff99ff);
box-shadow: 3px,3px ,3px, black;
}
h1{
color:#e6e6e6;
text-shadow: 2px,2px ,5px,#000000;
}
check out How to Direct Target Element with CSS
Leave a Reply