css text shadow | text shadow using css | text shadow

CodingPorium 0 Comments

css text shadow | text shadow using css | text shadow

css text shadow | text shadow using css | text shadow

Hey friends, today I'll  teach how to use css text shadow and how to make it look greater. Before we dive in, I'll introduce myself. I'm CodingPorium and I make coding tutorials and provide Free Source Code. Do check out my YouTube channel at here or by searching for CodingPorium on YouTube for more!

Introduction

Today we are going to see a simple, cool and pretty useful CSS property. This is the text-shadow property. You might have heard of box-shadow before. However, text-shadow is made specifically for text.


Components

Look at the photo below. I have added arrows to easily explain the components of text-shadow.


css text shadow | text shadow using css | text shadow

Take some time to understand these components as this is the main structure. Based on this, we can make text shadow.

Basics

Now, let's see some common cool text-shadow examples.


a) Simple Text Shadow using css

Below is a very basic and simple CSS Text shadow example to get started with


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px green;
}
</style>
</head>
<body>

<h1>Wow! I have a text-shadow</h1>

</body>
</html>

The output would be:
css text shadow | text shadow using css | text shadow



b) Blur Effect Text Shadow using css

This shadow is same as earlier but we add a blur effect by specifying how much blur effect we want.


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 8px green;
}
</style>
</head>
<body>

<h1>Wow! I have a text-shadow</h1>

</body>
</html>


The output would be:

css text shadow | text shadow using css | text shadow



c) Double Glow Shadow using css

This is a simple but cool shadow effect where we add 2 overlapping shadows. However, do choose the 2 colors properly so that the shadow looks nice.


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px gold, 0 0 5px green;
}
</style>
</head>
<body>

<h1>Wow! I have a text-shadow</h1>

</body>
</html>


The output would be:
css text shadow | text shadow using css | text shadow


Based on the simple components structure of text shadow diagram and 3 beginner-friendly CSS text shadow examples given, I hope you can now use text shadow to make your text look cool!

Thank You!

Do contact me at codingporium.blogspot.com/p/contact.html or comment down below any doubts or suggestion you have. Do subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random for giving me the chance to write here and I hope to see you all in future posts. Goodbye!

Written by: @codingporium

Tags

Post a Comment

Post a Comment

Previous Post Next Post