Categories
Web development

CSS text-shadow Property


The CSS text-shadow property adds a shadow to text.

CSS text-shadow Property

Demo:

Syntax:

text-shadow: x-shadow y-shadow blur-radius color|none;

x-shadow – the position of the horizontal shadow.

y-shadow – the position of the vertical shadow.

blur-radius (optional) – the blur radius.

color (optional) – the color of the shadow.

none (default) – no shadow.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-shadow: 2px 2px red;
  font-size:25px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Example2:

You can add more than one shadow to the text. Add a comma-separated list of shadows:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: #94d2bd;
  text-shadow: 2px 2px #005f73, 0px 0px 15px #0a9396;
  font-size: 25px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Example3:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: #0a9396;
  text-shadow: 1px 1px #e9d8a6, 2px 2px #e9d8a6, 3px 3px #e9d8a6, 4px 4px #e9d8a6, 5px 5px #e9d8a6, 6px 6px #e9d8a6, 7px 7px #e9d8a6, 8px 8px #e9d8a6, 9px 9px #e9d8a6, 10px 10px #e9d8a6, 11px 11px #e9d8a6, 12px 12px #e9d8a6, 13px 13px #e9d8a6, 14px 14px #e9d8a6, 15px 15px #e9d8a6;
  font-size: 25px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Enjoy coding!

Read also:

CSS Shadows

CSS box-shadow Property

CSS Long Shadow Text Effect

Categories
Web development

CSS Long Shadow Text Effect

CSS Long Shadow Text Effect

Demo:

*to see the CSS Long Shadow Text Effect on the website click here.

To create the CSS Long Shadow Text Effect follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="container">
  <div class="text">LONG SHADOW</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background end the elements:

body {
  height:100vh;
  align-items: center;
  justify-content: center;
  display: flex;
}

.container {
  position: relative;
  width:400px;
  height:100px;
  overflow: hidden;
  background-color: #00b4d8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 10px 10px rgba(0,0,0,0.3);
}

Style the text. To create the long shadow effect we will use the CSS text-shadow property.

.text {
  font-family: arial black;
  color: white;
  font-size:40px;
  text-shadow: 0px 0px #0096c7,1px 1px #0096c7,2px 2px #0096c7,3px 3px #0096c7, 4px 4px #0096c7,5px 5px #0096c7,6px 6px #0096c7,7px 7px #0096c7,8px 8px #0096c7,9px 9px #0096c7,10px 10px #0096c7,11px 11px #0096c7,12px 12px #0096c7,13px 13px #0096c7,14px 14px #0096c7,15px 15px #0096c7,16px 16px #0096c7, 17px 17px #0096c7,18px 18px #0096c7,19px 19px #0096c7,20px 20px #0096c7,21px 21px #0096c7,22px 22px #0096c7,23px 23px #0096c7,24px 24px #0096c7,25px 25px #0096c7,26px 26px #0096c7,27px 27px #0096c7,28px 28px #0096c7, 29px 29px #0096c7,30px 30px #0096c7,31px 31px #0096c7,32px 32px #0096c7,33px 33px #0096c7,34px 34px #0096c7,35px 35px #0096c7,36px 36px #0096c7,37px 37px #0096c7,38px 38px #0096c7,39px 39px #0096c7,40px 40px #0096c7, 41px 41px #0096c7,42px 42px #0096c7,43px 43px #0096c7, 44px 44px #0096c7,45px 45px #0096c7,46px 46px #0096c7,47px 47px #0096c7,48px 48px #0096c7,49px 49px #0096c7,50px 50px #0096c7, 51px 51px #0096c7,52px 52px #0096c7,53px 53px #0096c7,54px 54px #0096c7,55px 55px #0096c7, 56px 56px #0096c7;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS box-shadow Property

CSS Gradients

CSS Sliced Text Effect