Text shadow in css
In this article we are going to learn about text shadow property in css, how to create text drop shadow.
We learnt about css in general, inline css, internal css, external css, selectors css, positions in css, display in css, lists style in css, multiple css, fixed layout in css, liquid layout in css, links style in css, box shadow in css, text align in css and table style in css so, we will be focusing on text shadow.
Text shadow
Text shadow is a Cascading Style Sheet property used to give a text drop shadow in html.
Let us create a div element with text shadow applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-shadow-example {
text-shadow: 1px 2px 3px;
}
<style/>
</head>
<body>
<div class="text-shadow-example">This is a div element with text shadow applied.</div>
</body>
</html>
So, we should have the following results and a text have dark drop shadow around it.
Let us create another div element with orange text shadow color specified, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-shadow-example {
box-shadow: 1px 2px 3px orange;
}
<style/>
</head>
<body>
<div class="text-shadow-example">This is a div element with text shadow and orange text shadow color specified.</div>
</body>
</html>
So, we should have the following results and a text have orange drop shadow around it.
Let us create two div elements with orange text shadow color specified, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-shadow-example1 {
text-shadow: 1px 2px 3px orange;
float: left;
width: 45%;
}
.text-shadow-example2 {
text-shadow: 1px 2px 3px orange;
float: right;
width: 45%;
}
<style/>
</head>
<body>
<div class="text-shadow-example1">This is a div element with text shadow and box shadow color specified.</div>
<div class="text-shadow-example2">This is a div element with text shadow and box shadow color specified.</div>
</body>
</html>
So, we should have the following results and the texts have orange drop shadow colors around them.
Let us create two div elements with purple and orange text shadow colors specified, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-shadow-example1 {
text-shadow: 3px 0px 2px purple;
float: left;
width: 45%;
}
.text-shadow-example2 {
text-shadow: 0px 3px 7px orange;
float: right;
width: 45%;
}
<style/>
</head>
<body>
<div class="text-shadow-example1">This is a div element with purple text shadow color specified.</div>
<div class="text-shadow-example2">This is a div element with orange text shadow color specified.</div>
</body>
</html>
So, we should have the following results and the texts have different drop shadow colors around them.