ADVERTISEMENT

CSS Text Shadow Property With Example Code

Telegram Group Join Now

ADVERTISEMENT

CSS Text Shadow Property With Example Code

CSS Text Shadow Property With Example Code
CSS Text Shadow Property With Example Code

 

ADVERTISEMENT

ADVERTISEMENT

Hey friends, today I’ll teach how to use css text shadow and how to make it look greater.

Introduction

ADVERTISEMENT

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.

ADVERTISEMENT

Components

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

CSS Text Shadow Property
CSS Text Shadow Property

 

ADVERTISEMENT

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

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

a) Simple Text Shadow using css

ADVERTISEMENT

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

ADVERTISEMENT

<!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 Property
CSS Text Shadow Property

b) Blur Effect Text Shadow using css

This shadow is the 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>

Restaurant Website Using HTML and CSS

The output would be:

CSS Text Shadow Property
CSS Text Shadow Property

c) Double Glow Shadow using css

ADVERTISEMENT

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.

ADVERTISEMENT

<!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 Property
CSS Text Shadow Property

 

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

Based on the simple components structure of the 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!

ADVERTISEMENT

Thank You!

comment down below any doubts or suggestions you have. I hope this post was useful and thanks to Code With Random for giving me the chance to write here I hope to see you all in future posts. Goodbye!

Written by: @codingporium

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT