CSS Multiple text shadow Border Code and Tutorial

8 Oct, 2022

Creating a Multiple Text Shadow using HTML and CSS. Follow the Step by Step guide or Watch YouTube Video for Code.

Step 1: Create an text-shadow.html file and write basic HTML5 blocks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
    content="width=device-width, 
    initial-scale=1.0" />
    <title>Text Shadow</title>
    
  </head>
  <body>
  
  </body>
</html>

Step 2: Now, create one parent 'div' and one child 'div' with different classes.

<div class="box">
    <h1 class="shadow">Shadow</h1>
</div>

Step 3: Final Step, add multiple text shadow to the text like code below to all side.

.box{
    display: flex;
    justify-content: center;
    margin: 4em;
}
.shadow{
    font-weight: bold;
    font-size: 76px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    color: white;
    letter-spacing: 5px;
    font-family: sans-serif;
    text-shadow: 4px 4px 0 #ff3232, 4.8px 4.8px 0 #000,
    3px 3px 0 #000, 4.8px 3px 0 #000, 3px 4.8px 0 #000,
    8px 8px 0 #342cff, 9px 9px #000, 7px 7px #000, 7px 9px #000,
    9px 7px #000, 12px 12px #30ff59, 13px 13px #000, 11px 11px #000,
    13px 11px #000, 11px 13px #000;
}

Done!

Pro Tips: Change the Colour of shadow you want or add remove shadow from the text shadow.

Thanks for Reading, Follow for more tutorials like this on Instagram & YouTube. or Checkout other Blogs.

Blog

Step 1: Create an text-shadow.html file and write basic HTML5 blocks.

Step 2: Now, create one parent 'div' and one child 'div' with different classes.

Step 3: Final Step, add multiple text shadow to the text like code below to all side.

0 Replies so far - Add your comment