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!

Share this: