Skip to content
Related Articles

Related Articles

How to create long shadow of text without using text-shadow in HTML and CSS ?
  • Last Updated : 18 Jul, 2020

Shadows are really a nice way to give depth and 3-D look to any text. Generally, we use text-shadow to give shadow to the text but this shadow is short and to create long shadow (shadow in which text is visible like that of reflection) we have to use before selector and skew function.

Approach: The approach is to use a skew to create tilted text first and then use before to make the original text whose shadow was created using the skew function.

HTML Code: In this section, we have our text wrapped inside a h1 tag.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Long Shadow Effect</title>
</head>
  
<body>
    <div class="center">
        <h1 data-title="GEEKS">GEEKS</h1>
    </div>
</body>
  
</html>

chevron_right


CSS Code: For CSS, follow the below given steps.



  • Step 1: Apply a grayish background to the body.
  • Step 2: Align the text to the center and use skew function over it.
  • Step 3: Change the color of the skewed text to a slightly dark version of the background color.
  • Step 4: Use before selector and set the content to the attribute value of h1 tag .
  • Step 5: Now use the skew function with the same angle that of the original one but with negation.

Note: Make sure the skew angle is not more than 70deg and the angle used in “h1” tag styling and before selector are the same with one being the nagative value of the other.

CSS

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        background: rgb(122, 116, 116);
    }
  
    .center {
        margin: 200px 0 0 350px;
    }
  
    h1 {
        font-size: 6em;
        color: rgba(0, 0, 0, .2);
        position: absolute;
        margin: 0;
        padding: 0;
        transform-origin: bottom;
        transform: skewX(50deg);
  
    }
  
    h1::before {
        content: attr(data-title);
        position: absolute;
        color: #fff;
        transform-origin: bottom;
        transform: skewX(-50deg)
    }
</style>

chevron_right


Complete Code: It is the combination of the above two sections of code.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Long Shadow Effect</title>
  
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background: rgb(122, 116, 116);
        }
  
        .center {
            margin: 200px 0 0 350px;
        }
  
        h1 {
            font-size: 6em;
            color: rgba(0, 0, 0, .2);
            position: absolute;
            margin: 0;
            padding: 0;
            transform-origin: bottom;
            transform: skewX(50deg);
  
        }
  
        h1::before {
            content: attr(data-title);
            position: absolute;
            color: #fff;
            transform-origin: bottom;
            transform: skewX(-50deg)
        }
    </style>
</head>
  
<body>
    <div class="center">
        <h1 data-title="GEEKS">GEEKS</h1>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :