What is shadow effect?
- Shadow effects are used to add shadow to HTML elements.
- CSS text-shadow is used to apply shadow effect on text.
- We can also set multiple shadow effects on HTML elements.
Shadow Effects are:
i) text-shadow
ii) box-shadow
This will be our boilerplate:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Shadow Efefcts in CSS </title>
<style>
</style>
</head>
<body>
</body>
</html>
Text Shadow
- As its name suggests the text shadow is used to add shadow effects to text.
- We can add multiple shadow effects on the text by using commas (,).
- And we can also add blur on the shadow.
Example
index.html
<!DOCTYPE html>
<html>
<head>
<title> Text Shadow </title>
<style>
.firstText {
text-shadow: 2px 2px;
}
.secondText {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1 class="firstText"> HTML Simplified Series </h1>
<h1 class="secondText"> CSS Masterr Series </h1>
</body>
</html>
Output:
Box Shadow
- The box-shadow property is used to apply one shadow effect to the HTML element.
- We can also add multiple box-shadow using commas (,).
Example
index.html
<!DOCTYPE html>
<html>
<title> box shadow in CSS </title>
<head>
<style>
div {
width: 400px;
height: 200px;
padding: 20px;
background-color: skyblue;
box-shadow: 10px 10px red;
}
</style>
</head>
<body>
<div> box shadow in CSS Master Series </div>
</body>
</html>
Output:
